JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
1、本文使用js+jQuery實(shí)現(xiàn)輪播圖,需要引用jquery包,另種實(shí)現(xiàn)分別是animate實(shí)現(xiàn)自適應(yīng)的輪播,以及transform平滑輪播(在注釋代碼中)。
2、代碼中的圖片大家自己更換就可以了,樣式和邏輯均寫(xiě)在js里。
3、html標(biāo)簽代碼,js代碼
<div class="slider"> //輪播箭頭 <p class="lastpic"><img src="../images/prev.png"></p> <p class="nextpic"><img src="../images/next.png"></p> //輪播圖片 <ul id="slides" class="slides clearfix"> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無(wú)圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無(wú)圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無(wú)圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無(wú)圖片"></li> </ul> </div>
<script type="text/javascript"> $(document).ready(function() { var len = $(".slider li").length-1; //給slider設(shè)置樣式 $(".slider").css({ "width":"100%", "height": "inherit", "overflow": "hidden", "display":"inline-block" }); //給ul設(shè)置寬度 $(".slides").css({ "position": "relative", "width":((len+1)*100).toString()+"%", "margin":"0", "padding":"0"}); //給li設(shè)置百分比寬度 $(".slides li").css({ "width":(100/(len+1)).toString()+"%", "float":"left" }); //給圖片設(shè)置寬度 $(".responsive").css({ "width":"100%", "height":"inherit" }); //控制點(diǎn)樣式 $(".slider p").css({ "position": "absolute", "z-index":"999", "cursor": "pointer" }); $(".slider .lastpic").css({ "left":"0", "margin-top":"7%" }); $(".slider .nextpic").css({ "right":"0", "margin-top":"7%" }); //animate移動(dòng) var i = 0; $(".nextpic").click(function(){ moveNext(i); }); $(".lastpic").click(function(){ moveLast(i); }); //自動(dòng)輪播 var timer = setInterval(function(){ moveNext(i); },5000); moveNext = function(n){ if(n==len){ i=-1; $(".slider .slides").animate({right: ""},800); }else{ $(".slider .slides").animate({right:((n+1)*100).toString()+"%"}, 800); } i++; } moveLast = function(n){ if(n==0){ i=len+1; $(".slider .slides").animate({right:(len*100).toString()+"%"}, 800); }else{ $(".slider .slides").animate({right:((n-1)*100).toString()+"%"}, 800); } i--; } //手機(jī)觸摸效果 var startX,endX,moveX; function touchStart(event){ var touch = event.touches[0]; startX = touch.pageX; } function touchMove(event){ var touch = event.touches[0]; endX = touch.pageX; } function touchEnd(event){ moveX = startX - endX; if(moveX>50){ moveNext(i); }else if(moveX<-50){ moveLast(i); } } document.getElementById("slides").addEventListener("touchstart",touchStart,false); document.getElementById("slides").addEventListener("touchmove",touchMove,false); document.getElementById("slides").addEventListener("touchend",touchEnd,false); //transition移動(dòng)固定寬度,無(wú)法自適應(yīng) // $(".nextpic").click(function(){ // if(i==len){ // i=-1; // $(".slider .slides").css({ // 'transition-timing-function':'linear', // 'transition-duration':'800ms', // 'transform':'translateX(0px)' // }) // }else{ // $(".slider .slides").css({ // 'transition-timing-function':'linear', // 'transition-duration':'800ms', // 'transform':'translateX(-'+(i+1)*width+'px)' // }) // } // i++; // }); // $(".lastpic").click(function(){ // if(i==0){ // i=len+1; // $(".slider .slides").css({ // 'transition-timing-function':'linear', // 'transition-duration':'800ms', // 'transform':'translateX(-'+len*width+'px)' // }) // }else{ // $(".slider .slides").css({ // 'transition-timing-function':'linear', // 'transition-duration':'800ms', // 'transform':'translateX(-'+(i-1)*width+'px)' // }) // } // i--; // }) }); </script>
以上所述是小編給大家介紹的JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng)),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)輪播圖的完整代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡(jiǎn)單代碼
- JS實(shí)現(xiàn)輪播圖效果的3種簡(jiǎn)單方法
- js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- 使用html+js+css 實(shí)現(xiàn)頁(yè)面輪播圖效果(實(shí)例講解)
- 原生js實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
- JS使用定時(shí)器與事件監(jiān)聽(tīng)實(shí)現(xiàn)輪播圖切換功能
相關(guān)文章
javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript調(diào)用Activex控件的事件的實(shí)現(xiàn)方法
最近在搞一個(gè)客戶(hù)端調(diào)用activex控件的開(kāi)發(fā)。一些實(shí)現(xiàn)方法小結(jié),需要的朋友可以參考下。2010-04-04js+html獲取系統(tǒng)當(dāng)前時(shí)間
這篇文章主要為大家詳細(xì)介紹了javascript html獲取系統(tǒng)當(dāng)前時(shí)間,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法
今天小編就為大家分享一篇layer.open的自適應(yīng)及居中及子頁(yè)面標(biāo)題的修改方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JS實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航條特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航條特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JavaScript進(jìn)階(四)原型與原型鏈用法實(shí)例分析
這篇文章主要介紹了JavaScript原型與原型鏈,結(jié)合實(shí)例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05流量統(tǒng)計(jì)器如何鑒別C#:WebBrowser中偽造referer
這篇文章主要介紹了流量統(tǒng)計(jì)器如何鑒別C#:WebBrowser中偽造referer,需要的朋友可以參考下2015-01-01javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04