jquery实现轮播图特效

本文实例为大家分享了jquery实现轮播图的具体代码，供大家参考，具体内容如下

一、实现功能：

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代码

 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 
  

  
1
  
2
  
3
  
4
  
5
  
 
 
 <
 
 >

3、jquery代码：

三、实现效果图

1、默认显示效果

2、鼠标悬浮效果

精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。