❶ 用jquery實現圖片輪播怎麼寫呢求指教
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其實就是圖片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此處需要將溢出框架的圖片部分隱藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此處需注意relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/
}
.slideShowulli{
float:left;/*讓四張圖片左浮動，形成並排的橫著布局，方便點擊按鈕時的左移動*/
width:620px;
}
.slideShow.showNav{/*用絕對定位給數字按鈕進行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代碼規范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(document).ready(function(){
varslideShow=$(".slideShow"),//獲取最外層框架的名稱
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//獲取按鈕
oneWidth=slideShow.find("ulli").eq(0).width();//獲取每個圖片的寬度
vartimer=null;//定時器返回值，主要用於關閉定時器
variNow=0;//iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0
showNumber.on("click",function(){//為每個按鈕綁定一個點擊事件
$(this).addClass("active").siblings().removeClass("active");//按鈕點擊時為這個按鈕添加高亮狀態，並且將其他按鈕高亮狀態去掉
varindex=$(this).index();//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此處用到left屬性，所以ul的樣式裡面需要設置position:relative;讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定
})
});
functionautoplay(){
timer=setInterval(function(){//打開定時器
iNow++;//讓圖片的索引值次序加1，這樣就可以實現順序輪播圖片
if(iNow>showNumber.length-1){//當到達最後一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉到第一張圖重新開始
iNow=0;}
showNumber.eq(iNow).trigger("click");//模擬觸發數字按鈕的click
},2000);//2000為輪播的時間
}
autoplay();
slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比較關鍵。
})
</script>
主體代碼：
[html]viewplainprint?
<body>
<divclass="slideShow">
<!--圖片布局開始-->
<ul>
<li><ahref="#"><imgsrc="images/view/111.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/112.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/113.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/114.jpg"/></a></li>
</ul>
<!--圖片布局結束-->
<!--按鈕布局開始-->
<divclass="showNav">
<spanclass="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按鈕布局結束-->
</div>
</body>