功能描述：
图片播放分为2个顺序：正序和反序，正序就是从第一张到最后一张，然后再第一张，反序是从第一张开始，然后最后一张，再到第一张。
1：当没有鼠标操作时，图片正序播放，每隔特定时间播放一次。
2：如果鼠标从左向右滑动，则图片跳过间隔时间，播放顺序强制切换为正序，立即播放至下一张。
3：如果鼠标从右向左滑动，则图片跳过间隔时间，播放顺序强制切换为反序，立即播放至下一张。
实现思路：
把所有图片放在同一位置，初始时只有第一张设为显示，其他调为display:none.利用fadeToggle（）函数实现图片淡入淡出，利用setInterval()函数实现自动轮播，如果检测到滑动事件，则clearInterval(),立即执行轮播函数，完成后开启setInterval()。
代码如下：
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script>
var i = 0;
window.reverse = false; //默认为正序播放
$(document).ready(function(){
picGroup = [$("#div1"),$("#div2"),$("#div3"),$("#div4")];
addlistener();
ID = setInterval(show1,4000);
});
function nextPicIndex() //对全局边量i进行更改，改为当前博播放顺序下的下一张图片索引
{
if(reverse == true)
{
if(i > 0)
{
i--;
}
else
{
i = 4 -1;
}
}
else
{
if(i < 3)
{
i++;
}
else
{
i = 0;
}
}
}
function show1(){
picGroup[i].fadeToggle(2000);
nextPicIndex();
picGroup[i].fadeToggle(2000);
}
function addlistener()
{
$("#slide").bind("mousedown",start);
}
function start(event)
{
if(event.button == 0) //当鼠标左键还是按下状态时
{
X = event.pageX;
Y = event.pageY;
$("#slide").bind("mousemove",move);
$("#slide").bind("mouseup",stop);
}
return false; //很关键，取消执行浏览器默认事件，没有这一步，该事件执行不了
}
function move(event)
{
X1 = event.pageX;
Y1 = event.pageY;
return false; //同样取消浏览器默认事件
}
function stop()
{
if(X1 - X > 50) //滑动路程大于50，且为向右滑动
{
reverse = false; //正序
clearInterval(ID); //停止当前的interval
show1(); //立即执行一次图片下一张播放
ID = setInterval(show1,4000); //重新开启interval
}
else if(X1 - X < -50)//滑动路程大于50，且为向左滑动
{
reverse = true; //反序
clearInterval(ID);
show1();
ID = setInterval(show1,4000);
}
$("#slide").unbind("mousemove",move); //左键松开，则接除绑定鼠标移动事件
$("#slide").unbind("mouseup",stop); //和左键松开事件
}
</script>
<style>
div {
position: absolute;
left: 3px;
top: 0px;
width:800px;
height:800px;
}
</style>
</head>
<body>
<div id="slide" style="position: absolute; left: 30px; top: 20px; width:800px; height:800px; " >
<div id="div1" style="background-color:red;"><img width = "800px" height = "600px" src="img/1.jpg"></img></div>
<div id="div2" style="display:none;background-color:green;"><img width = "800px" height = "600px" src="img/2.jpg"></img></div>
<div id="div3" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/3.jpg"></img></div>
<div id="div4" style="display:none;background-color:blue;"><img width = "800px" height = "600px" src="img/4.jpg"></img></div>
</div>
</body>
</html>