jQuery实现自动轮播图

案例效果如下：

1、轮播效果分析

当前轮播图显示两张图片，无限向左轮播，当鼠标悬停到某一张图片的时候，轮播停止，并且其他图片加了一层蒙版，悬停到另一张图片时该图片蒙版消失，并且其他图片蒙版出现

2、HTML结构分析

最外层是一个用来居中的div，为了好实现轮播效果，里面加了一个无序列表ul，作为图片容器，每一个li代表一个图片，平铺开。移动的时候只要移动ul就好，即改变ul的margin-left就实现了图片的移动效果
HTML源码如下：

<div class=\"box\"><ul><li><img src=\"img/1 (1).JPG\" alt=\"\"></li><li><img src=\"img/1 (2).jpg\" alt=\"\"></li><li><img src=\"img/1 (3).jpg\" alt=\"\"></li><li><img src=\"img/4.jpg\" alt=\"\"></li></ul></div>

3、css代码实现

<style>* {margin: 0;padding: 0;}.box {width: 1280px;height: 320px;margin: 100px auto;/* border: 1px solid #000; */overflow: hidden;background-color:#000;}ul {list-style: none;width: 3840px;background-color:#000;}li {float: left;}</style>

4、jQuery代码分析

当要实现四张图片的无限轮播，我们写jQuery代码的时候，会发现一件事，就是图片当移动了一定的位置后，下一张图片不会正常的移动，而会从一张跳到下一张
解决办法：加HTML结构，在后边多加两张图片，就是第一张跟第二张

<div class=\"box\"><ul><li><img src=\"img/1 (1).JPG\" alt=\"\"></li><li><img src=\"img/1 (2).jpg\" alt=\"\"></li><li><img src=\"img/1 (3).jpg\" alt=\"\"></li><li><img src=\"img/4.jpg\" alt=\"\"></li><li><img src=\"img/1 (1).JPG\" alt=\"\"></li><li><img src=\"img/1 (2).jpg\" alt=\"\"></li></ul></div>

jQuery代码如下：

$(function () {// 定义一个变量保存偏移位var offset = 0var timer// 实现自动轮播函数function outplay() {timer = setInterval(function () {// 让偏移位每次都加-1（图片向左移动）offset += -1// 如果偏移位到达四张图片的宽度if(offset <= -2560){// 让偏移位重置为0offset = 0}// 改变ul的左外边距$(\'ul\').css(\'marginLeft\',offset)},1)}outplay()// 需求2：设置鼠标移入移出效果并添加蒙版// 1、监听鼠标的移入移出事件$(\'li\').hover(function () {$(\'li\').stop()// 当鼠标移入图片的时候停止轮播clearInterval(timer)// 2、并且给其他图片添加蒙版// 选择其他图片添加蒙版$(this).siblings().fadeTo(1000,0.5)// 去除蒙版$(this).fadeTo(1000,1)},function () {// 鼠标移出的时候，轮播继续执行outplay()$(\'li\').stop()// 蒙版消失$(\'li\').fadeTo(1000,1)})})