jquery實現(xiàn)呼吸輪播效果

更新時間：2021年10月19日 17:15:17 作者：weixin_43700362

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

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

大概思路：

呼吸輪播就是圖片淡入淡出輪播。
div（設(shè)置相對定位）里存放ul，li不需要float：left，設(shè)置絕對定位即可。left：0，top：0。
此時不需要在所有圖片后面補假0.
div里還包括左右按鈕，下面小圓點，通過絕對定位，把它們定位到合適位置就好。
設(shè)置index為0，點擊右按鈕時，當(dāng)前圖片淡出，index++，當(dāng)圖片為最后一個的時候，index設(shè)置為0，新圖片淡入。下面小圓點對應(yīng)變色。
左按鈕思路大致相同。
下面小圖片點擊的時候，如果點擊的和當(dāng)前顯示的index相同，則什么事情都不需要做。
點擊其他小圓點的時候，舊的圖片淡出，把當(dāng)前小圓點的index賦值給全局變量index，新圖片淡入。
被點擊的小圓點變色，其兄弟元素仍然為最初的顏色。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    .big{
        width:560px;
        height:300px;
        position: relative;
        margin:200px auto;
        border:10px solid red;
    }
    .big .move{
        width:5600px;
        height:300px;
        position: absolute;
        left:0;
        top:0;
    }
    .big  .move li{
        /*float: left;*/
        list-style: none;
        display: none;
        position: absolute;
        top:0;
        left:0;
    }
    .big  ul .first{
        display: block;
    }
    img{
        width:560px;
        height:300px;
    }

    .btn div{
        width:40px;
        height:60px;
        background: red;
        position: absolute;
        top:50%;
        margin-top:-30px;
    }
    .rightbtn{
        right:0;
    }

    .circle{
        position: absolute;
        left:0px;
        bottom:0px;
        width:200px;
        height:30px;

    }
    .circle ul{
        /*overflow: hidden;*/
        list-style: none;
        float: left;
    }
    .circleUl li{
        background: white;
        float: left;
        margin-right:10px;

        width:20px;
        height:20px;
        border-radius:50%;
    }


</style>
<body>
<div class="big">

    <ul class="move">
        <li class="first"> <img src="img/0.jpg" alt=""> </li>
        <li> <img src="img/1.jpg" alt=""> </li>
        <li> <img src="img/2.jpg" alt=""> </li>
        <li> <img src="img/3.jpg" alt=""> </li>
    </ul>

    <div class="btn">
        <div class="leftbtn"> < </div>
        <div class="rightbtn"> > </div>
    </div>

    <div class="circle">
        <ul class="circleUl">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</div>


<script src="js/jquery-1.12.3.min.js">  </script>

<script>
//    設(shè)置第一個小圓點為紅色
   $(".circleUl li").eq(0).css("background","red");

    var index = 0;
    $(".leftbtn").click(function(){
//        舊的圖淡出
        $(".move li").eq(index).fadeOut(400);
        index--;
      if(index<0){
          index = 3;
      }
//        新圖淡入
        $(".move li").eq(index).fadeIn(400);
//        對應(yīng)下標(biāo)為index的小圓點變色
        $(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


    $(".rightbtn").click(function(){
        $(".move li").eq(index).fadeOut(400);
        index++;
        console.log(index);
        if(index ==4 ){
            index = 0;
        }
        $(".move li").eq(index).fadeIn(400);
        $(".circleUl li").eq(index).css("background","red").siblings().css("background","white");
    });


//    小圓點點擊事件
    $(".circleUl li").click(function(){
//       如果本來就顯示的圖一，再次點擊第一個小圓點的話，什么也不做
        if(index == $(this).index()) return;

//        舊的圖片淡出
        $(".move li").eq(index).fadeOut(400);

//        點擊到哪個小圓點，把小圓點的index賦值給全局變量index （更新全局變量index）
        index =  $(this).index();

        //   新圖片淡入
        $(".move li").eq(index).fadeIn(400);
//        小圓點變色
        $(this).css("background","red").siblings().css("background","white");



    })
</script>

</body>
</html>

運行結(jié)果：