这个轮播图案例可以添加自动播放吗？

试着在源代码的基础上，给swiper设置了setInterval，里面调用slider.next()。然后在touchstart时清除掉定时器，在touchend时重新设置定时器，但这样就会有个bug，图片轮播的速度变得很鬼畜，是不是方法上有问题。请问老师该如何给案例添加自动轮播？

龍巛幽 2020-04-21

源自：移动端事件 5-1 课程总结

收起

4回答

好帮手慕星星回答被采纳获得+3积分 2020-04-22 17:23:54

同学你好，自己能够发现问题并解决是很棒的哦！继续加油~

收起回答

提问者龍巛幽 2020-04-22 12:25:13

// 自动轮播
    var myInv = setInterval(function () {
        isSwiping = true;
        slider.next(function () {
            isSwiping = false;
        });
    },3000);

    hammer.on('pressdown panstart',function () {
        clearInterval(myInv);
    });
    hammer.on('pressup panend',function () {
        myInv = setInterval(function () {
            isSwiping = true;
            slider.next(function () {
                isSwiping = false;
            });
        },3000);
    });

这样改了就行了

收起回答

提问者龍巛幽 2020-04-22 12:23:59

哦是我代码部分变量命名搞错了，改了之后就没问题了

收起回答

好帮手慕星星 2020-04-22 09:51:42

同学你好，可以将自己修改后的代码粘贴上来，老师帮助测试，便于定位问题所在。

祝学习愉快！

收起回答

提问者龍巛幽 #1

就是在源码“4.6 幻灯片的操控部分--滑动切换.html”的最后script部分加入了一段 // 以下为加入的自动轮播的部分 var myInv = setInterval(function () { isSwiping = true; slider.next(function () { isSwiping = false; }); },1000); hammer.on('press panstart',function () { clearInterval(myInt); }); hammer.on('pressup panend',function () { var myInt = setInterval(function () { slider.next(); },1000); }); </script> </body> </html> 引用的css和js就是课程源文件里面的，这里就是自己加了一个定时器

2020-04-22 10:18:53