教你一步步用jQyery實(shí)現(xiàn)輪播器
實(shí)現(xiàn)原理
如圖,試想一下,若是將<ul>的width屬性值設(shè)置的很寬,直到可以裝下你所有的圖片,而每一個(gè)圖片又用<li>包著并且設(shè)置了左浮動(dòng)。
那么當(dāng)我們向左移動(dòng)ul的時(shí)候并且移動(dòng)的距離為<li>的寬度,第二個(gè)<li>不就被移動(dòng)到了<div>的窗口,這樣一來(lái)圖片不就被一張一張顯示出來(lái)了嗎?
接下來(lái)我們?cè)谠O(shè)置<div>的屬性overflow:hidden
,那么<div>窗口以外的圖片不顯示,只顯示移動(dòng)到當(dāng)前窗口的圖片,是不是又完美了一些,感覺(jué)快做好了是吧!
說(shuō)了一些原理,好了,直接上代碼,記得引入jquery。
這是div做的布局,做的時(shí)候記得加上邊框,做后在刪掉,這樣便于測(cè)試
<div class="slideShow"> <div class="nav-t"> <ul> <li><a href="#" target="_blank"><img src="images/1.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/2.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/3.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/4.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="images/5.png" alt=""></a></li> </ul> <div class="nav-b"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> </div> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="lunbo.js"></script>
接下來(lái)設(shè)置一下樣式
<style> .slideShow{ border:0px solid blue; width:600px; height:450px; margin:50px auto; position:relative; } .nav-t{ border:0px solid red; width:580px; height:430px; margin:8px auto; position:relative; overflow:hidden; } .nav-t ul{ border:0px solid green; list-style:none; width:3000px; height:430px; margin:0; padding:0; position:relative; } .nav-t li{ height:427px; width:580px; float:left; } .nav-b{ position:absolute; top:390px; left:220px; cursor:default; } .nav-b span{ margin-right:5px; border:1px solid red; padding:0 6px; border-radius:12px; color:#fff; background:rgba(132,125,119,0.5); cursor:pointer; } .nav-b span.active{ background:rgba(0,0,0,0.8); } </style>
用js實(shí)現(xiàn)點(diǎn)擊輪播圖片、自動(dòng)輪播圖片,鼠標(biāo)移動(dòng)上去停止輪播
$(function(){ $(function(){ var slide=$(".slideShow"), navt=slide.find(".nav-t"), ul=navt.find("ul"), navbs=slide.find(".nav-b span"), onwidth=ul.find("li").eq(0).width(), //獲取ul下的li寬度 timer=null, inow=0; navt.hover(function(){ clearInterval(timer); //鼠標(biāo)移上去,清除掉自動(dòng)輪播功能,即定時(shí)輪播 },autoPlay); navbs.on("click",function(){ //點(diǎn)擊輪播事件 var me=$(this); inow=me.index(); //此處變量用的與自動(dòng)輪播函數(shù)里的相同,為的是能在隨便點(diǎn)擊后,自動(dòng)輪播時(shí)按照我們點(diǎn)擊了的繼續(xù)向后輪播,這叫動(dòng)態(tài)實(shí)時(shí) ul.animate({left:-inow*onwidth},0.01); //ul向左移動(dòng)從而使得下一個(gè)li顯示到div的當(dāng)前窗口 navbs.removeClass("active"); //清除掉上一個(gè)點(diǎn)擊按鈕的樣式 me.addClass("active"); //為當(dāng)前被點(diǎn)擊的按鈕添加第一個(gè)按鈕樣式 }); autoPlay(); function autoPlay(){ //自動(dòng)輪播函數(shù) timer=setInterval(function(){ //開(kāi)定時(shí)器 inow++; if(inow==navbs.length){ //判斷是否到了最后一張,若是到了,返回到第一張 inow=0 } navbs.eq(inow).trigger("click"); //根據(jù)定時(shí)的時(shí)間用span的索引自動(dòng)調(diào)用click事件,trigger為jQuery的自動(dòng)調(diào)用函數(shù) },3000); } }); });
看一下效果圖?好的
總結(jié)
好了,以上就是利用jQyery實(shí)現(xiàn)輪播器的全部?jī)?nèi)容了,怎么樣,要不你也做一個(gè)?希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
關(guān)于event.cancelBubble和event.stopPropagation()的區(qū)別介紹
cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他瀏覽器的疑惑介紹。2011-12-12jquery利用json實(shí)現(xiàn)頁(yè)面之間傳值的實(shí)例解析
本文主要介紹了jquery利用json實(shí)現(xiàn)頁(yè)面之間傳值的方法,具有很好的參考價(jià)值,需要的朋友可以看下2016-12-12jQuery soColorPacker 網(wǎng)頁(yè)拾色器
這篇文章主要介紹了jQuery soColorPacker 網(wǎng)頁(yè)拾色器 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06jQuery實(shí)現(xiàn)下拉框左右移動(dòng)(全部移動(dòng),已選移動(dòng))
本文主要介紹jQuery中利用appendTo()方法追加元素已實(shí)現(xiàn)左右移動(dòng)的功能,希望對(duì)大家有所幫助。2016-04-04