css樣式：
*{ margin: 0; padding: 0;}ul{ list-style:none;}.slideShow{ width: 620px; height: 700px; /*其實就是圖片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此處需要將溢出框架的圖片部分隱藏*/}.slideShow ul{ width: 2500px; position: relative; /*此處需注意relative : 對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/}.slideShow ul li{ float: left; /*讓四張圖片左浮動，形成并排的橫著布局，方便點擊按鈕時的左移動*/ width: 620px;}.slideShow .showNav{ /*用絕對定位給數字按鈕進行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px;}.slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff;}.slideShow .showNav .active{ background: #b63e1a;}js代碼規范：
<script src="../../../jQuery/js/jquery-2.1.4.js"></script> <script type="text/javascript">$(document).ready(function(){ var slideShow=$(".slideShow"), //獲取最外層框架的名稱 ul=slideShow.find("ul"), showNumber=slideShow.find(".showNav span"), //獲取按鈕 oneWidth=slideShow.find("ul li").eq(0).width(); //獲取每個圖片的寬度 var timer=null; //定時器返回值，主要用于關閉定時器 var iNow=0; //iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0 showNumber.on("click",function(){ //為每個按鈕綁定一個點擊事件 $(this).addClass("active").siblings().removeClass("active"); //按鈕點擊時為這個按鈕添加高亮狀態，并且將其他按鈕高亮狀態去掉 var index=$(this).index(); //獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值 iNow=index; ul.animate({ "left":-oneWidth*iNow, //注意此處用到left屬性，所以ul的樣式里面需要設置position: relative; 讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定 }) }); function autoplay(){ 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>主體代碼：
<body> <div class="slideShow"> <!--圖片布局開始--> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/111.jpg"/></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/112.jpg" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/113.jpg" /></a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/view/114.jpg" /></a></li> </ul> <!--圖片布局結束--> <!--按鈕布局開始--> <div class="showNav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按鈕布局結束--> </div></body>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
