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怎么實現圖文輪播切換特效”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。