jQuery實現(xiàn)大圖輪播
更新時間:2017年02月13日 15:39:36 作者:周全264
本文主要分享了jQuery實現(xiàn)大圖輪播的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
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 : 對象不可層疊,但將依據(jù)left,right,top,bottom等屬性在正常文檔流中偏移位置,如果沒有這個屬性,圖片將不可左右移動*/ } .slideShow ul li{ float: left; /*讓四張圖片左浮動,形成并排的橫著布局,方便點擊按鈕時的左移動*/ width: 620px; } .slideShow .showNav{ /*用絕對定位給數(shù)字按鈕進行布局*/ 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代碼規(guī)范:
<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為正在展示的圖片索引值,當用戶打開網(wǎng)頁時首先顯示第一張圖,即索引值為0 showNumber.on("click",function(){ //為每個按鈕綁定一個點擊事件 $(this).addClass("active").siblings().removeClass("active"); //按鈕點擊時為這個按鈕添加高亮狀態(tài),并且將其他按鈕高亮狀態(tài)去掉 var index=$(this).index(); //獲取哪個按鈕被點擊,也就是找到被點擊按鈕的索引值 iNow=index; ul.animate({ "left":-oneWidth*iNow, //注意此處用到left屬性,所以ul的樣式里面需要設置position: relative; 讓ul左移N個圖片大小的寬度,N根據(jù)被點擊的按鈕索引值iNOWx確定 }) }); function autoplay(){ timer=setInterval(function(){ //打開定時器 iNow++; //讓圖片的索引值次序加1,這樣就可以實現(xiàn)順序輪播圖片 if(iNow>showNumber.length-1){ //當?shù)竭_最后一張圖的時候,讓iNow賦值為第一張圖的索引值,輪播效果跳轉(zhuǎn)到第一張圖重新開始 iNow=0; } showNumber.eq(iNow).trigger("click"); //模擬觸發(fā)數(shù)字按鈕的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> <!--圖片布局結(jié)束--> <!--按鈕布局開始--> <div class="showNav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> </div> <!--按鈕布局結(jié)束--> </div> </body>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應頁面布局
- 基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
- jQuery+css實現(xiàn)的點擊圖片放大縮小預覽功能示例【圖片預覽 查看大圖】
- jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能【測試可用】
- jQuery實現(xiàn)鼠標滑過預覽圖片大圖效果的方法
- jQuery實現(xiàn)的小圖列表,大圖展示效果幻燈片示例
- jquery插件jquery.LightBox.js實現(xiàn)點擊放大圖片并左右點擊切換效果(附demo源碼下載)
- jQuery實現(xiàn)點擊小圖片淡入淡出顯示大圖片特效
- jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中
- 基于jQuery插件實現(xiàn)點擊小圖顯示大圖效果
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jQuery實現(xiàn)點擊小圖顯示大圖代碼分享
- jquery 圖片點擊放大預覽功能詳解
相關文章
jqueryMobile 動態(tài)添加元素,展示刷新視圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨queryMobile 動態(tài)添加元素,展示刷新視圖的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05BootStrap和jQuery相結(jié)合實現(xiàn)可編輯表格
這篇文章主要介紹了BootStrap和jQuery相結(jié)合實現(xiàn)可編輯表格的相關資料,需要的朋友可以參考下2016-04-04