jquery實現(xiàn)淡入淡出輪播圖效果

更新時間：2020年12月13日 12:01:02 作者：兩歲小小碼農

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

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

如題所述，直接上代碼

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<style>
 * {
 padding: 0px;
 margin: 0px;
 }

 /* 盒子 */
 .box {
 position: relative;
 }

 /* banner圖 */
 .box,
 .banner {
 width: 1000px;
 height: 500px;
 margin: 50px auto;
 }

 .box .banner {
 position: relative;
 list-style: none;
 }

 .banner li {
 display: none;
 }

 .box ul li img {
 position: absolute;
 }

 .banner .b1 {
 display: block;
 }

 span {
 background: rgb(0, 0, 0, 0.5);
 width: 40px;
 height: 50px;
 display: block;
 position: absolute;
 left: 0px;
 top: 50%;
 z-index: 3;
 line-height: 50px;
 text-align: center;
 cursor: pointer;
 font-family: "宋體";
 font-size: 20px;
 color: white;
 }

 .right {
 left: auto;
 right: 0px;
 }

 .bottom {
 position: absolute;
 bottom: 10px;
 left: 50%;
 transform: translateX(-50%);
 list-style: none;
 }

 .bottom li {

 width: 10px;
 height: 10px;
 background: rgb(255, 255, 255);
 float: left;
 border-radius: 50%;
 margin: 0px 5px;
 /* 重影 */
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 cursor: pointer;
 }

 .bottom .on {
 background: rgb(255, 153, 0);
 }
</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<body>
 <div class="box">
 <!-- 輪播圖 -->
 <ul class="banner">
  <li class="b1">
  <img src="../img/timg.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg1.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg2.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg3.jpg" alt="">
  </li>
  <li>
  <img src="../img/timg4.jpg" alt="">
  </li>
 </ul>
 <!-- 左右切換 -->
 <span class="left">
  < </span> <span class="right">&gt;
 </span>
 <!-- 底部按鈕 -->
 <ol class="bottom">
  <li class="on"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ol>
 </div>
</body>
<script>
 var $box = $(".box");
 var $bli = $(".box ul li");
 var $bleft = $(".box .left");
 var $bright = $(".box .right");
 var $dot = $(".box .bottom li");
 var timer = null;
 var num = 0;
 // 因為幾行代碼一樣 所以進行代碼封裝
 function play() {
 num = num % $bli.length;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass("on");
 }

 function autoplay() {
 timer = setInterval(function () {
  num++;
  play();
 }, 2000);
 };
 autoplay();
 // 當鼠標放上去的時候 計時器停止 移除的時候計時器工作
 // $box.hover(function() {
 // clearInterval(timer); 
 // },function() {
 // autoplay(); 
 // });
 // 下面是同樣的效果 另一種寫法
 $box.mouseover(function () {
 clearInterval(timer);
 });
 $box.mouseout(function () {
 autoplay();
 });
 $bleft.click(function () {
 num--;
 play();
 });
 $bright.click(function () {
 num++;
 play();
 });
 $dot.click(function (event) {
 var index = $(this).index();
 num = index;
 $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
 $dot.eq(num).addClass("on").siblings().removeClass();
 });
</script>

</html>

其實淡入淡出輪播圖的核心思想就是獲取到當前的索引，根據(jù)索引找出圖片的索引然后更改索引達到一個圖片顯示其他圖片消失然后輪流交替進行的。最主要的核心思想在上面sibinling（）中通過這個方法讓當前元素進行淡入操作但是讓其他元素進行淡出操作，所以效果上就形成了，一張張圖盤輪流出來的效果。

更多關于輪播的精彩文章，請點擊《jquery圖片輪播》進行學習

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

您可能感興趣的文章: