許多網(wǎng)站的首頁都會有輪播圖畅买，今天給大家講一個簡單的輪播圖细睡。
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';
? ? }
}
這個輪播圖功能比較單一不夠完善纹冤，日后會繼續(xù)給大家?guī)砉δ荦R全的輪播圖！
