许多网站的首页都会有轮播图，今天给大家讲一个简单的轮播图。
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';
}
}
这个轮播图功能比较单一不够完善，日后会继续给大家带来功能齐全的轮播图！
网友评论