求助，輪播圖加移動端觸屏滑動
目前輪播圖能自動輪播和點擊下方圓點進行變動圖片，移動端無法進行圖片左右手勢滑動，求大神加一段
<script src="https://bbs.csdn.net/jquery-3.4.1.min.js"></script>
<div id="wheel" class="rad">
<ul>
<li class="active">
<img src="https://img.uj5u.com/2020/11/04/153404040658191.jpg"/>
</li>
<li>
<img src="https://img.uj5u.com/2020/11/04/153404040658192.jpg"/>
</li>
<li>
<img src="https://img.uj5u.com/2020/11/04/153404040658193.jpg"/>
</li>
<li>
<img src="https://img.uj5u.com/2020/11/04/153404040658194.jpg"/>
</li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
//輪播圖
(function(){
var oW = $("#wheel");
var oWul = oW.find("ul li");
var oWol = oW.find("ol li");
var timer = null;
var iNow = 0;
fnpl();
oW.hover(function(){
clearInterval(timer);
},function(){
autoplay();
});
oWol.click(function(){
iNow = $(this).index();
fnpl();
});
function autoplay(){
timer = setInterval(function(){
iNow++;
iNow%=oWul.length;
fnpl();
},3000);
}
autoplay();
function fnpl(){
oWul.each(function(i){
if(i != iNow){
oWul.eq(i).removeClass().fadeOut();
oWol.eq(i).removeClass();
}else{
oWul.eq(i).addClass("active").fadeIn(500);
oWol.eq(i).addClass("active");
}
});
}
})();
uj5u.com熱心網友回復：
滑動可以和你下面的oWol的click事件一樣，你監聽 滑動事件 就行了，滑動事件觸發，然后進行iNow = $(this).index();
fnpl();
uj5u.com熱心網友回復：
能幫寫一下么 新手 這個也是網上找來的 沒有那個功能 所以求助
uj5u.com熱心網友回復：
touchstart,touchend2個事件。start中記錄下當前的位置。end中記錄下當前位置，并通過對比與start中的位置偏移量去得出比如是向左劃了，還是向右劃了。然后設一個閥值，比如50。偏移量一旦超過這個值，就觸發輪播圖向前或向后；當然，你也可以在touchmove中做實時檢測比對然后觸發。看你自己的需求了
uj5u.com熱心網友回復：
用swiper不香嗎
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/202033.html
標籤：JavaScript