jQuery实现图片轮播效果
圖片輪播效果 :
在頁面的指定位置實現的圖片自動的左右輪流切換展示,效果為無縫連接;
點擊圖片左下的標簽(或中間的小圓點)切換到對應的圖片;
點擊圖片的左右切換標簽;
???
整體思路 :
自動輪播: 將一個用于放置圖片素材的與顯示框同高度的大div放入顯示框,將圖片素材放入大的div中,通過jquery的animate()方法改變大div相對于顯示框絕對位置的left值及變化時間實現圖片的滑動;使用setInterval()方法設置定時器,達到自動播放效果;無縫連續播放的重點在于,第一張圖片與最后一張圖片要相同,這樣播放完最后一張圖片后將大div框的left設定為初始值,再將與圖片索引相同的變量設定為1(第二張),這樣就能達到無縫連續滑動效果;
點擊標簽切換到對應圖片: 對點擊切換圖片的li標簽添加鼠標點擊事件,若存在定時器的先清除,使用$(this).Index()獲取當前點擊圖片的序號(索引),將大div的left值設置為當前圖片位置的值,同時別忘了將當前li標簽設置深顏色的明顯效果,其他li標簽設置初始效果;在事件中設置倒計時,當鼠標點擊后一段時間不進行其他操作,則恢復自動播放的定時器;
點擊向左向右標簽切換到上/下一張圖片: 該標簽使用< a >標簽達到效果更好(防止連續點擊時產生選中頁面變藍的現象),先獲取點擊時圖片的編號,此時不能使用$(this).Index(),因為此時this指代的對象為左右切換標簽,而不是圖片對象,還記得上面那個與圖片索引相同的變量嗎?我們需要一開始就設定它為全局變量(我將它起名為rcd),它的值相當于是和圖片,li標簽一起綁定的,在還沒有點擊向左向右標簽時,圖片是在輪播的,rcd變量中存著當前圖片的序號,因此,盡管用不了this,我們可以用rcd+1/-1找到向右滑/向左劃的圖片編號,有了編號,就可以知道大div需要運動到的位置,和設置左下方的標簽顯示狀態了.當rcd-1==-1時,將div的位置設置為最后一張圖片顯示的位置,然后將rcd設置為倒數第二張圖片對應的編號;當rcd+1比最后一張還多一時,將div的位置設置為第一張圖片顯示的位置,將rcd設置為第二張圖片對應的編號即可.
代碼實現如下 :
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> //引入jquery (css代碼未貼)<script type="text/javascript">$(function(){var rcd=0; //代表圖片和li標簽編號的全局變量 // 滑動函數function slide(){ rcd++;if(rcd==4){ //右滑倒最后一張時,將圖片設定為第一張的位置,即將滑動的圖片設定為第二張(rcd=1)$('#sld').css({'left':'0'});rcd=1;};var dis = rcd*(-1210)+'px'; //這里的1210是每張圖片的寬度,rcd和dis的關系就是編號和div left值的關系$('#sld').stop().animate({'left':dis},1000) //設定leftif (rcd==3) { //當切換到最后一張時(一共4張圖片),將左下方的標簽樣式也改成與第一張一樣的$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})}else{$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //不是最后一張那么就正常執行}}// 設定定時器,開始輪播var timer = setInterval(slide,2000);var st; //聲明倒計時函數變量名 // 綁定li鼠標點擊事件$('#fix ul li').click(function(){clearInterval(timer); //清除定時器(同下一行)clearTimeout(st);var rcd = $(this).index(); //獲得點擊的li的編號var dis =rcd*(-1210)+'px'; //獲得該編號對應的div的left值$('#sld').stop().animate({'left':dis},500) //開始運動$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'}) //設置當前li樣式,其他li變為初始值st = setTimeout(function(){ //設置定時器,若3秒內沒有鼠標點擊操作,就重新設置輪播定時器timer = setInterval(slide,2000);},3000)}); // 左圖標點擊事件$('#fix .lt').click(function(){clearInterval(timer);clearTimeout(st);rcd--; //點擊前的編號-1if(rcd==-1){ //如果rcd減后值為-1,那么將div的left設置為最后一張圖顯示的值,并將rcd設置為倒數第二張的編號$('#sld').css({'left':'-3630px'});rcd=2;};var dis = rcd*(-1210)+'px';$('#sld').stop().animate({'left':dis},1000) //運動if (rcd==3) { //與前面相同$('#fix ul li').eq(0).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})}else{$('#fix ul li').eq(rcd).css({'opacity': '0.6'}).siblings('li').css({'opacity': '0.2'})}st = setTimeout(function(){timer = setInterval(slide,2000);},3000)}) // 右圖標點擊事件$('#fix .rt').click(function(){clearInterval(timer);clearTimeout(st);slide(); //右圖標點擊一次與滑動函數一致st = setTimeout(function(){timer = setInterval(slide,2000);},3000)}) // 給#fix div加鼠標移入事件$('#fix').mouseenter(function(){ $('#fix a').css({'display':'block'}); //鼠標移入時,向左向右圖標顯示}) // 給#fix div加鼠標移出事件$('#fix').mouseleave(function(){$('#fix a').css({'display':'none'}); //鼠標移出時,向左向右圖標隱藏})})</script></head><body><div id="fix"><div id="sld"><img src="輪播圖/ph1.png"/><img src="輪播圖/ph2.jpg"/><img src="輪播圖/ph3.jpg"/><img src="輪播圖/ph1.png"/></div><ul><li style="opacity: 0.6;">iPhone6</li><li>Mate9</li><li>vivo X9</li></ul><a href="javascript:void(0)" class="lt"><img src="輪播圖/left.png"/></a> //阻止瀏覽器的默認跳轉<a href="javascript:void(0)" class="rt"><img src="輪播圖/right.png"/></a></div></body>也可以在我的Github上克隆這個效果的完整代碼: https://github.com/Getthrough/jquery_demo_1
歡迎指導和交流!
總結
以上是生活随笔為你收集整理的jQuery实现图片轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Access denied for us
- 下一篇： 【HDU2019多校】E - Snowy