87,996
社区成员
发帖
与我相关
我的任务
分享求助，轮播图加移动端触屏滑动
求助，轮播图加移动端触屏滑动
目前轮播图能自动轮播和点击下方圆点进行变动图片，移动端无法进行图片左右手势滑动，求大神加一段
<script src="/jquery-3.4.1.min.js"></script>
目前轮播图能自动轮播和点击下方圆点进行变动图片，移动端无法进行图片左右手势滑动，求大神加一段
<script src="/jquery-3.4.1.min.js"></script>
<div id="wheel" class="rad">
<ul>
<li class="active">
<img src="../guiyu/guiyu1.jpg"/>
</li>
<li>
<img src="../guiyu/guiyu2.jpg"/>
</li>
<li>
<img src="../guiyu/guiyu3.jpg"/>
</li>
<li>
<img src="../guiyu/guiyu4.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");
}
});
}
})();
...全文
请发表友善的回复…
发表回复
lolmi 2020-11-04
- 打赏
- 举报
网上找了一段JS改了一下 成功了 有需要的拿去改
<script>
//轮播图
window.onload = function () {
banner();
};
var banner = function () {
/*1. 自动轮播图且无缝 定时器，过渡*/
/*2. 点要随着图片的轮播改变 根据索引切换*/
/*3. 滑动效果 利用touch事件完成*/
/*4. 滑动结束的时候 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡*/
/*5. 滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡*/
/*轮播图*/
var banner = document.querySelector('#wheel');
/*屏幕宽度*/
var width = banner.offsetWidth;
/*图片容器*/
var imageBox = banner.querySelector('ul');
/*点容器*/
var pointBox = banner.querySelector('ol');
/*所有的点*/
var points = pointBox.querySelectorAll('li');
var addTransition = function () {
imageBox.style.transition = 'all 0.1s';
imageBox.style.webkitTransition = 'all 0.1s';
}
var removeTransition = function () {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
}
var setTranslateX = function (translateX) {
imageBox.style.transform = 'translateX(' + translateX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
}
/*程序的核心 index */
var index = 0;
var timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 3000);
/*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
imageBox.addEventListener('transitionend', function () {
/*自动滚动的无缝*/
if (index >= 7) {
index = 0;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*滑动的时候也需要无缝*/
else if (index <= 0) {
index = 8;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*根据索引设置点*/
/*此时此刻 index 的取值范围 1-8（0,8--1,9）*/
/*点索引 index - 1 */
setPoint();
});
/*设置点的方法*/
var setPoint = function () {
/*index 1-8*/
/*清除样式*/
for (var i = 0; i < points.length; i++) {
var obj = points[i];
obj.classList.remove('active');
}
/*给对应的加上样式*/
points[index - 0].classList.add('active');
}
/*绑定事件*/
var startX = 0;
var distanceX = 0;
var isMove = false;
banner.addEventListener('touchstart', function (e) {
/*清除定时器*/
clearInterval(timer);
/*记录起始位置的X坐标*/
startX = e.touches[0].clientX;
});
banner.addEventListener('touchmove', function (e) {
/*记录滑动过程当中的X坐标*/
var moveX = e.touches[0].clientX;
/*计算位移 有正负方向*/
distanceX = moveX - startX;
/*计算目标元素的位移 不用管正负*/
/*元素将要的定位=当前定位+手指移动的距离*/
var translateX = -index * width + distanceX;
/*滑动--->元素随着手指的滑动做位置的改变*/
removeTransition();
setTranslateX(translateX);
isMove = true;
});
banner.addEventListener('touchend', function (e) {
/*4. 5. 实现*/
/*要使用移动的距离*/
if (isMove) {
if (Math.abs(distanceX) < width / 3) {
/*吸附*/
addTransition();
setTranslateX(-index * width);
} else {
/*切换*/
/*右滑动 上一张*/
if (distanceX > 0) {
index--;
}
/*左滑动 下一张*/
else {
index++;
}
/*根据index去动画的移动*/
addTransition();
setTranslateX(-index * width);
}
}
/*最好做一次参数的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定时器*/
clearInterval(timer);
timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 3000);
});
}
</script>A_鹏飞 2020-11-03
- 打赏
- 举报
用swiper不香吗
泡泡鱼_ 2020-11-03
- 打赏
- 举报
touchstart,touchend2个事件。start中记录下当前的位置。end中记录下当前位置，并通过对比与start中的位置偏移量去得出比如是向左划了，还是向右划了。然后设一个阀值，比如50。偏移量一旦超过这个值，就触发轮播图向前或向后；
当然，你也可以在touchmove中做实时检测比对然后触发。看你自己的需求了
lolmi 2020-11-03
- 打赏
- 举报
能帮写一下么 新手 这个也是网上找来的 没有那个功能 所以求助
gqkmiss 2020-11-03
- 打赏
- 举报
滑动可以和你下面的oWol的click事件一样，你监听 滑动事件 就行了，滑动事件触发，然后进行
iNow = $(this).index();
fnpl();
