基于jQuery實(shí)現(xiàn)左右圖片輪播(原理通用)
本文為大家分享了jQuery實(shí)現(xiàn)左右圖片輪播代碼,供大家參考,具體實(shí)現(xiàn)內(nèi)容如下
運(yùn)行效果圖:
重點(diǎn)!??!
實(shí)現(xiàn)原理:
通過判斷index值的大小變化來判斷圖片左移還是右移。通過控制圖片的left值,來達(dá)到一個(gè)輪播的效果。
具體代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script src="js/jquery.min.js"></script> <style> .banner{ margin:0 auto; border: 4px dashed black; width:400px; height:200px; position: relative; overflow:hidden; } .banner a{ z-index: 100; display: block; width:100%; height: 100%; position: absolute; left:100%; top:0; } .banner .first{ left:0; } .banner a img{ width:100%; height: 100%; } .choose{ z-index: 1000; position: absolute; left:150px; top:180px; width:100px; height: 10px; } .choose span{ margin-right: 15px; float: left; display:block; background: blue; width:10px; height: 10px; border-radius: 10px; } .choose span:hover{ background: red; } .choose .red{ background: red; } .banner .pre,.next{ cursor:pointer; text-align:center; border-radius:20px; display:block; background:#cccccc; opacity:0.4; text-decoration: none; z-index: 200; display:block; width:40px; height: 40px; font-size: 40px; color:red; position: absolute; top:80px; } .banner .pre{ left:0px } .banner .next{ right: 0px; } </style> <body> <div class="banner"> <!-- 這里為上一頁下一頁點(diǎn)擊按鈕 --> <span class="pre">-</span> <span class="next">+</span> <!-- 此處為輪播主體,顏色塊代替。圖片自加 --> <a href="###" class="first" style="background: pink;"></a> <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a> <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a> <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a> <!-- 此處為輪播部分下方小點(diǎn)選擇 --> <div class="choose"> <span class="red"></span> <span></span> <span></span> <span></span> </div> </div> <script> /*定義兩個(gè)變量,保存當(dāng)前頁碼和上一頁頁碼*/ var $index=0; var $exdex=0; /*小點(diǎn)的鼠標(biāo)移入事件,觸發(fā)圖片左移還是右移*/ $(".choose span").mouseover(function(){ //獲取當(dāng)前移入的index值 $index=$(this).index(); //首先讓點(diǎn)的顏色變化,表示選中 $(".choose span").eq($index).addClass("red").siblings(). removeClass("red"); //判斷如果index變小,證明圖片要往左移動(dòng)。變大則為右移 if($index>$exdex){ next(); }else if($index<$exdex){ pre(); } //移動(dòng)完畢將當(dāng)前index值替換了前頁index return $exdex=$index; }); //下一頁的點(diǎn)擊事件。在右移基礎(chǔ)上加了最大index判斷 $(".next").click(function(){ $index++; if($index>3){ $index=0 } $(".choose span").eq($index).addClass("red").siblings(). removeClass("red"); next(); return $exdex=$index; }); //上一頁的點(diǎn)擊事件 $(".pre").click(function(){ $index--; if($index<0){ $index=3 }; $(".choose span").eq($index).addClass("red").siblings(). removeClass("red"); pre(); return $exdex=$index; }); //加個(gè)定時(shí)器,正常輪播 var atime=setInterval(function(){ $(".next").click(); },1000); //這里為右移和左移的事件函數(shù)。 //右移基本原理就是先讓exdex定位的left左移百分百,而選中的當(dāng)前頁從屏幕右邊移入,left變?yōu)? function next(){ $(".banner a").eq($index).stop(true,true). css("left","100%").animate({"left":"0"}); $(".banner a").eq($exdex).stop(true,true). css("left","0").animate({"left":"-100%"}); } function pre(){ $(".banner a").eq($index).stop(true,true). css("left","-100%").animate({"left":"0"}); $(".banner a").eq($exdex).stop(true,true). css("left","0").animate({"left":"100%"}); } </script> </body> </html>
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部?jī)?nèi)容,幫助大家實(shí)現(xiàn)一個(gè)簡(jiǎn)單大方的圖片輪播效果。
- 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
- Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- jQuery圖片輪播的具體實(shí)現(xiàn)
- 基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- 原生js和jquery實(shí)現(xiàn)圖片輪播淡入淡出效果
- jQuery手動(dòng)點(diǎn)擊實(shí)現(xiàn)圖片輪播特效
- 基于jquery的圖片輪播 tab切換組件
- jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
- 使用jQuery實(shí)現(xiàn)圖片輪播效果
相關(guān)文章
jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動(dòng)畫變化效果
這篇文章主要介紹了jQuery控制DIV層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動(dòng)畫變化效果,涉及jQuery基于animate方法操作頁面元素實(shí)現(xiàn)動(dòng)畫漸變效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10jQuery AJAX應(yīng)用實(shí)例總結(jié)
這篇文章主要介紹了jQuery AJAX應(yīng)用,結(jié)合實(shí)例形式總結(jié)分析了jQuery 使用AJAX訪問各種格式數(shù)據(jù)相關(guān)應(yīng)用操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,結(jié)合實(shí)例形式分析了jQuery鼠標(biāo)事件響應(yīng)及頁面元素動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項(xiàng)卡
jQuery EasyUI API 中文文檔 - 標(biāo)簽頁/選項(xiàng)卡(Tabs),學(xué)習(xí)jQuery EasyUI的朋友可以參考下。2011-10-10解決jQuery使用JSONP時(shí)產(chǎn)生的錯(cuò)誤
這篇文章主要介紹了解決jQuery使用JSONP時(shí)產(chǎn)生的錯(cuò)誤,需要的朋友可以參考下2015-12-12