一、实现功能：

 

　　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，是避免定时器再等第一章图片