快捷導(dǎo)航

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

更新時(shí)間：2020年12月13日 12:01:02 作者：兩歲小小碼農(nóng)

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

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

如題所述，直接上代碼

<!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;
 // 因?yàn)閹仔写a一樣 所以進(jìn)行代碼封裝
 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();
 // 當(dāng)鼠標(biāo)放上去的時(shí)候 計(jì)時(shí)器停止 移除的時(shí)候計(jì)時(shí)器工作
 // $box.hover(function() {
 // clearInterval(timer); 
 // },function() {
 // autoplay(); 
 // });
 // 下面是同樣的效果 另一種寫(xiě)法
 $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>

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

更多關(guān)于輪播的精彩文章，請(qǐng)點(diǎn)擊《jquery圖片輪播》進(jìn)行學(xué)習(xí)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: