一、实现功能：
1、通过定时实现图片自我轮播
2、当图片轮播到最后一张时，会从第一张开始继续轮播
3、点击小圈圈图标能自动切换到对应图片
4、鼠标悬浮图片上停止图片轮播，当鼠标移开图片，会继续轮播
5、鼠标悬浮图片上会显示左右键图标，鼠标离开，会隐藏左右键图标
6、点击左键图标会切换到上一张图片，当切换到第一张图片时，再次点击左键图标会切换到最后一张图片；点击右键图标会显示到下一张图片，当切换到最后一张图片时，再次点击右键图标会切换达到第一张图片。
二、实现代码：
1、css代码：
body{
margin:0;
padding:0;
font:16px "微软雅黑",sans-serif;
}
。play-box{
position:relative;
width:500px;
height:313px;
margin:100px auto;
border:1px solid #ccc;
}
。play-box img{
width:500px;
height:313px;
border:0;
}
。play-box a{
display:block;
overflow:hidden;
opacity:0;
height:0;
transition:opacity .5s;
}
#imgList a.current{
opacity:1;
height:auto;
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
width:10px;
height:10px;
margin:0 4px;
font-size:0;
border-radius:50%;
background-color:#fff;
cursor:pointer;
float:left;
}
ul li.current{
background-color:red;
}
。iconList{
position:absolute;
bottom:10px;
left:50%;
margin-left:-45px;
}
。sliderbar{
position:absolute;
top:50%;
margin-top:-25px;
width:30px;
height:50px;
font-family:simsun;
color:#fff;
text-align:center;
line-height:50px;
background-color:#000;
opacity:.6;
display:none;
cursor:pointer;
}
。slidebar-left{
left:0;
}
。slidebar-right{
right:0;
}
2、body代码
3、jquery代码：
$（document）。ready（function（）{
//设置变量速度为3秒
var speed=3000;
//循环变量为1，是避免定时器再等第一章图片
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery