本文例項為大家分享了jquery實現輪播圖的具體程式碼，供大家參考，具體內容如下

一、實現功能：

1、通過定時實現圖片自我輪播
2、當圖片輪播到最後一張時，會從第一張開始繼續輪播
3、點選小圈圈圖示能自動切換到對應圖片
4、滑鼠懸浮圖片上停止圖片輪播，當滑鼠移開圖片，會繼續輪播
5、滑鼠懸浮圖片上會顯示左右鍵圖示，滑鼠離開，會隱藏左右鍵圖示
6、點選左鍵圖示會切換到上一張圖片，當切換到第一張圖片時，再次點選左鍵圖示會切換到最後一張圖片；點選右鍵圖示會顯示到下一張圖片，當切換到最後一張圖片時，再次點選右鍵圖示會切換達到第一張圖片。

二、實現程式碼：

1、css程式碼：

<style>
 /*設定body*/
 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; /*預設高度為0*/
 transition:opacity .5s; /*預設透明度過渡時間為0.5s*/
 }
 /*設定當前圖片顯示*/
 #imgList a.current{
 opacity:1; /*預設圖片顯示*/
 height:auto; /*預設高度為自動*/
 }
 /*設定列表ul*/
 ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 /*設定列表ul下的li*/ 
 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;
 }
</style>

2、body程式碼

<!--輪播圖邊框-->
 <div id="playBox" class="play-box">
 <!--圖片列表-->
 <div id="imgList">
  <a href="#" target="_blank" class="current">
  <img src="image/5.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/6.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/7.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/8.jpg"/>
  </a>
  <a href="#" target="_blank">
  <img src="image/9.jpg"/>
  </a>
 </div>
 <!--圖示列表-->
 <div class="iconList">
  <ul>
  <li class="current">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  </ul>
 </div>
 <!--左箭頭-->
 <div class="sliderbar slidebar-left"><</div>
 <!--右箭頭-->
 <div class="sliderbar slidebar-right">></div>
</div>

3、jquery程式碼：

<script src="js/jquery-3.4.1.min.js"></script>
<script>
 $(document).ready(function(){
 //設定變數速度為3秒
 var speed = 3000;
 //迴圈變數為1，是避免定時器再等第一章圖片
 var m = 1;
 //設定定時器的函式和時間
 var playTimer = setInterval(runPlay,speed);
 //定時函式
 function runPlay(){
 //判讀如果m大於4，就設定m=0
 if(m>4){
 m=0;
 }
 //呼叫controlPlay函式來控制圖片變化
 controlPlay(m);
 m++;
 }
 //通過引數控制圖片的變化,圖示變化
 function controlPlay(n){
 $("#imgList a").removeClass("current").eq(n).addClass("current");
 $("ul li").removeClass("current").eq(n).addClass("current");
 }
 //給整個輪播圖繫結滑鼠事件，當滑鼠放到輪播圖上停止輪播圖，當滑鼠離開輪播圖繼續滾動
 $("#playBox").mouseenter(function(){
 //停止定時
 clearInterval(playTimer);
 //左右控制按鈕顯示
 $(".sliderbar").fadeIn(300);
 }).mouseleave(function(){
 //重新開始定時
 playTimer =setInterval(runPlay,speed);
 //左右控制按鈕隱藏
 $(".sliderbar").fadeOut(300);
 });
 //給li繫結控制圖示繫結單擊事件
 $("ul li").click(function(){
 controlPlay($(this).index());
 //滑鼠點選過後修改m的值
 m =$(this).index()+1;
 }).hover(function(){
 //給li取消滑鼠懸停的冒泡
 return false;
 })
 //給左右的控制圖示取消 滑鼠懸停的冒泡
 $(".sliderbar").hover(function(){
 return false;
 })
 //下一張圖片
 $(".slidebar-right").click(function(){
 //判斷m的值
 if(m>4){
 m=0;
 }
 //顯示下一站圖片
 controlPlay(m);
 m ++;
 })
 //上一張圖片
 $(".slidebar-left").click(function(){
 //m預設顯示下一張，所以為了顯示上一張，m必須減2
 m -= 2;
 if(m<0){
 m=4;
 }
 //顯示上一張圖片
 controlPlay(m);
 //保證m要顯示下一張
 m ++;
 }) 
 });
</script>

三、實現效果圖

1、預設顯示效果

2、滑鼠懸浮效果

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。