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

　　3、jquery代码：

　　$（document）。ready（function（）{

　　//设置变量速度为3秒

　　var speed=3000;

　　//循环变量为1，是避免定时器再等第一章图片

以上就是“jQuery怎么实现图文轮播切换特效”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。