jquery實現呼吸輪播效果

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

大概思路：

呼吸輪播就是圖片淡入淡出輪播。
div（設定相對定位）裡存放ul，li不需要float：left，設定絕對定位即可。left：0，top：0。
此時不需要在所uMJhVCiKmc有圖片後面補假0.
div裡還包括左右按鈕，下面小圓點，通過絕對定位，把它們定位到合適位置就好。
設定index為0，點選右按鈕時，當前圖片淡出，index++，當圖片為最後一個的時候，index設定為0，新圖片淡入。下面小圓點對應變色。
左按鈕思路大致相同。
下面小圖片點選的時候，如果點選的和當前顯示的index相同，則什麼事情都不需要做。

點選其他小圓點的時候，舊的圖片淡出，把當前小圓點的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;uMJhVCiKmc 

        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="jquery實現呼吸輪播效果"> </li>
        &l 
t;li> <img src="img/1.jpg" alt="jquery實現呼吸輪播效果"> </li>
        <li> <img src="img/2.jpg" alt="jquery實現呼吸輪播效果"> </li>
        <li> <img src="img/3.jpg" alt="jquery實現呼吸輪播效果"> </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="/jquery-1.12.3.min.js">  </script>

<script>
//    設定第一個小圓點為紅色
   $(".circleUl li").eq(0).("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);
//        對應下標為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","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","white");



    })
</script>

</body>
</html>

執行結果：

jquery實現呼吸輪播效果

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

jquery實現呼吸輪播效果

jquery實現呼吸輪播效果

jQuery實現呼吸輪播圖

jQuery外掛實現圖片輪播效果

jQuery實現簡單輪播圖效果

jquery實現圖片輪播和滑動效果

vue實現勻速輪播效果

Axure如何實現圖片輪播效果！三分鐘搞定！

JavaScript實現無限輪播效果

js實現新聞輪播效果

vue實現無縫輪播效果（跑馬燈）

javascript實現花樣輪播效果

js實現滑動輪播效果

原生JS實現呼吸輪播圖

原生javascript實現圖片輪播效果程式碼

iOS實現3D卡片式輪播效果

Swift實現3D輪播圖效果

js實現無縫輪播圖效果

JavaScript實現移動端帶transition動畫的輪播效果

React實現輪播效果

js實現簡單的無縫輪播效果

jquery實現呼吸輪播效果

相關推薦