用js制作一个简单轮播图

许多网站的首页都会有轮播图，今天给大家讲一个简单的轮播图。

html代码如下：

<div id="big">

    <div id="middle">

        <img src="img/1.jpg" alt="1">

        <img src="img/2.jpg" alt="2">

        <img src="img/3.jpg" alt="3">

        <img src="img/4.jpg" alt="4">

        <img src="img/5.jpg" alt="5">

        <img src="img/6.jpg" alt="6">

        <img src="img/7.jpg" alt="7">

        <img src="img/8.jpg" alt="8">

    <img src="img/left.png" alt="" id="left">

    <img src="img/right.png" alt="" id="right">

</div>

css代码如下：

*{

padding:0;

    margin:0;

    list-style:none;

}

#big{

width:880px;

    height:410px;

    background:url(img/midbg.png);

    overflow:hidden;

    margin:100px auto;

    position:relative;

}

#middle{

width:7040px;

    height:310px;

    margin-top:50px;

    position:absolute;

    transition:all .5s linear;

    margin-left: -1760px;

}

#middle img{

width:880px;

    height:310px;

    float:left;

}

#left{

position:absolute;

    top:160px;

    left:10px;

}

#right{

position:absolute;

    top:160px;

    right:10px;

}

js代码如下:

var oMid=document.getElementById('middle');

var oLeft=document.getElementById('left');

var oRight=document.getElementById('right');

var n=-1760;

oLeft.onclick=function () {

if(n){

n+=880;

        oMid.style.marginLeft=n+'px';

    }else{

n= -6160;

        oMid.style.marginLeft=n+'px';

    }

}

oRight.onclick=function () {

if (n != -6160) {

n -=880;

        oMid.style.marginLeft = n +'px';

    }else {

n =0;

        oMid.style.marginLeft = n +'px';

    }

}

这个轮播图功能比较单一不够完善，日后会继续给大家带来功能齐全的轮播图！