jquery實現(xiàn)輪播圖特效

更新時間：2020年04月12日 11:41:41 作者：夢在深巷子

這篇文章主要為大家詳細介紹了jquery實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(xiàn)輪播圖的具體代碼，供大家參考，具體內容如下

一、實現(xiàn)功能：

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

二、實現(xiàn)代碼：

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; /*現(xiàn)在是文本狀態(tài)，要修改為塊狀*/
 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;
 //循環(huán)變量為1，是避免定時器再等第一章圖片
 var m = 1;
 //設置定時器的函數(shù)和時間
 var playTimer = setInterval(runPlay,speed);
 //定時函數(shù)
 function runPlay(){
 //判讀如果m大于4，就設置m=0
 if(m>4){
 m=0;
 }
 //調用controlPlay函數(shù)來控制圖片變化
 controlPlay(m);
 m++;
 }
 //通過參數(shù)控制圖片的變化,圖標變化
 function controlPlay(n){
 $("#imgList a").removeClass("current").eq(n).addClass("current");
 $("ul li").removeClass("current").eq(n).addClass("current");
 }
 //給整個輪播圖綁定鼠標事件，當鼠標放到輪播圖上停止輪播圖，當鼠標離開輪播圖繼續(xù)滾動
 $("#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>

三、實現(xiàn)效果圖

1、默認顯示效果