在写这个slide幻灯片之前,首先理清楚思路,这样才能更快速实现代码。
假设制作5张图片的幻灯片,那么图片的初始位置如下:
因为图片1-5是使用行内块的方式布局,只要控制图片1的div的margin-left
改变,就可以跟推箱子一样,实现5个图片的左右滑动。
可以看到,只需要设置1号图片移动至左边,后面的图片就可以跟着向左移动。
实现slides切换要实现功能如下:
li
标签,后续可以提供点击事件,切换图片li
圆点,根据点击li
的索引index()
来切换当前的图片那么下面来看看几种移动图片的情况。
因为代码贴上来篇幅过长,所以先上仓库地址,最后在末尾再贴上代码。
git clone git@gitee.com:kubernete/jquery-slide.git
分支代码:base-html-css
li
标签代码分支:create-li
在动态创建li
标签的这里,必须每次使用$('<li></li>')
来加入。不能写一个变量var $li = $('<li></li>')
来加入,这样写法的话,就是重复加入同一个li
,只会加成功一个。
错误写法示例如下:
根据点击li
标签的序号来设置图片1的margin-left
偏移量,就可以推箱子一样切换所有图片的位置。
只需要根据prev
next
的点击事件对 nowIndex
的位置增减,控制图片1的margin-left
偏移量即可。
通过一个$direct
方向的变量,以及$nowIndex
的自增自减,就可以控制图片左右来回的移动了。
mouseenter
和mouseleave
事件,控制定时任务,避免不断切换,不好操作。定时切换图片,鼠标移动入图片,则停止图片移动;鼠标离开图片,则图片开始移动。