slide 幻灯片的实现思路

在写这个slide幻灯片之前，首先理清楚思路，这样才能更快速实现代码。

假设制作5张图片的幻灯片，那么图片的初始位置如下：

因为图片1-5是使用行内块的方式布局，只要控制图片1的div的margin-left改变，就可以跟推箱子一样，实现5个图片的左右滑动。

当图片从1向左移动至2，图片实现效果大致如下

可以看到，只需要设置1号图片移动至左边，后面的图片就可以跟着向左移动。

功能需求

实现slides切换要实现功能如下：

• 根据设置的图片数量，自动生成下方的圆点li标签，后续可以提供点击事件，切换图片
• 点击下方的li圆点，根据点击li的索引index()来切换当前的图片
• 点击左右两边的箭头，前后切换图片
• 定时切换图片，鼠标移动入图片，则停止图片移动

那么下面来看看几种移动图片的情况。

码云代码仓库

因为代码贴上来篇幅过长，所以先上仓库地址，最后在末尾再贴上代码。

git clone git@gitee.com:kubernete/jquery-slide.git

首先编写好基本的HTML+CSS样式

分支代码：base-html-css

下一步，开始编写jquery动态生成下方圆点li标签

代码分支：create-li

在动态创建li 标签的这里，必须每次使用$('<li></li>')来加入。不能写一个变量var $li = $('<li></li>')来加入，这样写法的话，就是重复加入同一个li，只会加成功一个。

错误写法示例如下：

点击下方的li圆点，根据点击li的索引index()来切换当前的图片

根据点击li标签的序号来设置图片1的margin-left偏移量，就可以推箱子一样切换所有图片的位置。

点击prev、next两个按钮，来切换当前图片的位置

只需要根据prev next 的点击事件对 nowIndex 的位置增减，控制图片1的margin-left偏移量即可。

编写定时任务，自动切换图片

通过一个$direct方向的变量，以及$nowIndex的自增自减，就可以控制图片左右来回的移动了。

使用mouseenter和mouseleave事件，控制定时任务，避免不断切换，不好操作。

定时切换图片，鼠标移动入图片，则停止图片移动；鼠标离开图片，则图片开始移动。