如何实现一个简单的轮播效果

GitHub预览：https://luckzhu.github.io/slide-seam/
代码：https://github.com/luckzhu/slide-seam

实现思路
多张图片并排形成一张长图
显示窗口只有一张图片大小
点击后图片位置变化，达到轮播效果

初步显示
<img>标签引入多张图片，注意宽高要一致
<div>做显示窗口，overflow: hidden; 隐藏其它未显示的图片
html代码：

<div class="slide">
        <div class="window">
            <div class="images">
                <img src="./images/1.jpg" alt="图片" width="400">
                <img src="./images/2.jpg" alt="图片" width="400">
                <img src="./images/3.jpg" alt="图片" width="400">
                <img src="./images/4.jpg" alt="图片" width="400">
            </div>
            <ul class="buttons">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>

点击图片移动
用jQuery，$(selector).on("click",function(){})鼠标点击后执行图片切换

如何确认是第几张？
$(x.currentTarget).index()可得到点击元素在siblings中排第几

图片如何移动？
假设图片宽度位300px，比如点击第一张，translateX就变为0，点击第二张translateX就变为-300px，那么点击第n张即变为 n* -300，也就是index * -300

如何让他自动轮播？
让他自动触发“click”事件
setInterval(function(){ }, 3000)，写成箭头函数即是：setInterval(() =>{ }, 3000),每隔3秒执行一次。Tips: setInterval()方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。如果只想调用一次，可以用setTimeout()方法

自动选择图片，触发click
$().eq(index).trigger('click')，这里的 index 应改为n=0，n+=1， n % images.length。即从1，2，3，4逐个开始。

为什么不直接用1，2，3，4？
为了不写死，为了无论多少张图片，代码都不用改。

若当前用户点击了第3张，轮播也应从第3张开始自动，而不是第一张开始？
所以这里当用户手动点击过后，应当将此时的index赋值给n

当用户鼠标移上去后，自动轮播应该相应停止
$(.windows).on('mouseenter',function(){ window.clearInterval(timerId)} )
这里的 .windows 是一个css选择器，是指整个轮播对象，timerId 即为之前setInterval()取得计时器名字

同样的，当用户鼠标移出来之后，自动轮播也应相应开始
$(.windows).on('mouseleave',function(){ timerId = setInterval(function(){ }, 3000) )

其他效果实现
当轮播到第几张时，第几张的标签就变色，即高亮。
.addClass('blue')给当前的标签增加 class
.siblings('.red').removeClass('blue')给当前标签的兄弟移除class

代码优化
重复的地方封装函数

最后编辑于：2019.01.09 21:30:44