旋轉木馬輪播圖（原生js）

阿新 • • 發佈：2021-01-10

技術標籤：javascript

旋轉木馬輪播圖
在這裡插入圖片描述
五張圖片分別對應不同的left，top，width，opacity，zindex
所以我們要建一個數組，來儲存這5張圖片對應的位置等屬性
然後通過自定義動畫函式animate，詳情請點開連結新增連結描述
執行對li標籤裡的每一張圖片的動畫，分別到剛才儲存的數組裡。
每當點選切換圖片的按鈕，利用arr.shift()這個函式
意思是除去數組裡第一個元素，並且返回這個元素的值
再把這個元素新增到最後一個元素後面就好了
即：arr.push(arr.shift())
左邊按鈕相反
利用arr.pop()，把最後一個元素刪除，返回最後一個元素的值

用arr.unshift(arr.pop())把最後一個元素新增到第一個。
注意，為了確保動畫完成才能點選右邊的按鈕，我們要定義一個變數flag，設定最開始的值為true，即元素還沒有完成動畫，當點選事件發生，把flag變成false.這時候，動畫函式animate(element,{},fn),裡面這個fn是回撥函式，當動畫執行完畢後才執行這個函式。所以我們設定這個函式為:
function(){
flag = true;
}

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset= 
"UTF-8">
  <title>旋轉木馬輪播圖</title>
  <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li>< 
a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
    </ul>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
</div>
<script src="common.js"></script>
  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];
    var list = my$("slide").getElementsByTagName("li");
    function arrange(){
        for(var i=0;i<list.length;i++){
            animate(list[i],config[i],function(){
                flag = true;
            })
        }
    }
    var flag = true;
    window.onload = function(){
        arrange();
    }
    my$("arrRight").onclick = function(){
        if(flag==true){
            flag = false;
            config.push(config.shift());
            arrange();
        }
    }
    my$("arrLeft").onclick = function(){
       if(flag==true){
            flag = fales;
            config.unshift(config.pop());
            arrange();
       }
    }
    my$("slide").onmouseover = function(){
        animate(my$("arrow"),{"opacity":1})
    }
    my$("slide").onmouseout = function(){
        animate(my$("arrow"),{"opacity":0})
    }

  </script>

```css
@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

旋轉木馬輪播圖（原生js）

旋轉木馬輪播圖（原生js）

案例——輪播圖（原生JS實現）

JS實現橫向輪播圖（初級版）

JS實現縱向輪播圖（初級版）

JS實現橫向輪播圖（中級版）

JavaScript實現旋轉木馬輪播圖

PC端JS輪播圖（自動+手動）

web輪播圖（定時器）

JavaScript的無縫輪播圖（手動自動）

Flutter 輪播圖（基礎版）

JavaScript+css+HTML實現移動端輪播圖（含原始碼）

天貓主頁輪播圖（js動態效果）

JS實現旋轉木馬輪播案例

js實現輪播圖效果純js實現圖片自動切換

微信小程式輪播圖（詳細）

純css製作簡易輪播圖（animation、keyFrame）

手指滑動輪播圖（針對沒有滑動效果的ui框架實現手指滑動）

【雲開發】10分鐘零基礎學會做一個快遞查詢微信小程式，快速掌握微信小程式開發技能（輪播圖、API請求）

橫向手風琴輪播圖（jquery）

python測試開發django-191.Bootstrap3 輪播圖（Carousel）

旋轉木馬輪播圖（原生js）

相關推薦