JS之旋轉輪播圖

時間 2019-11-12

原文原文鏈接

效果圖以下：javascript

需求：點擊左右按鈕實現旋轉木馬
原理：點擊右側按鈕，把3號的樣式給2號，2號的給1號，1號的給5號，5號的給4號，4號的樣式給3號
步驟：
1.鼠標放上去左右按鈕顯示，移開就隱藏
2.讓頁面加載出全部盒子的樣式
3.把兩側按鈕綁定事件(調用同一個方法，只有一個參數，true爲正向旋轉，false爲反向旋轉)
4.書寫函數css

操做函數：左按鈕：刪除第一個，添加到最後一個html

操做函數：右按鈕：刪除最後一個，添加到第一個java

代碼示例以下jquery

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>旋轉輪播圖</title>
    <style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    a{
        text-decoration: none;
        cursor: pointer;
    }
    ul{
        list-style: none;
    }

        .wrap{
            width: 1200px;
            margin: 10px auto;
        }
        .slide{
            height: 500px;
            position: relative;
            border: 1px solid red;
        }
        .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%;
            background:url(images/prev.png) no-repeat;
            z-index: 99;
            margin-top: -56px;
        }
        .next{
            right: 0;
            background-image: url(images/next.png);
        }
    </style>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
        <li><a href="#"><img src="images/slidepic1.jpg"/></a></li>
        <li><a href="#"><img src="images/slidepic2.jpg"/></a></li>
        <li><a href="#"><img src="images/slidepic3.jpg"/></a></li>
        <li><a href="#"><img src="images/slidepic4.jpg"/></a></li>
        <li><a href="#"><img src="images/slidepic5.jpg"/></a></li>
        </ul>
    <!--左右切換按鈕-->
    <div class="arrow" id="arrow">
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>
    </div><!--slide結束-->
</div><!--wrap結束-->
<script type="text/javascript" src="jquery1.0.0.1.js"></script>
<script type="text/javascript">
window.onload = function(){
    //需求：點擊左右按鈕實現旋轉木馬
    //原理：點擊右側按鈕，把3號的樣式給2號，2號的給1號，1號的給5號，5號的給4號，4號的樣式給3號
    //步驟：
    //1.鼠標放上去左右按鈕顯示，移開就隱藏
    //2.讓頁面加載出全部盒子的樣式
    //3.把兩側按鈕綁定事件(調用同一個方法，只有一個參數，true爲正向旋轉，false爲反向旋轉)
    //4.書寫函數
    //  操做數組：正向旋轉：刪除數組中的第一個樣式，添加到最後一位
    //  操做數組：反向旋轉，刪除數組中的最後一個樣式，添加到第一位
    var arr = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            z:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            z:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            z:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            z:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            z:2
        }
    ];
    //0.獲取相關元素
    var slide = document.getElementById("slide");
    var liArr = document.getElementsByTagName("li");
    var arrow = document.getElementById("arrow");
    var left = arrow.children[0];
    var right = arrow.children[1];
    var flag = true;//開閉原則
    //1.鼠標放上去，左右按鈕顯示，鼠標移開，左右按鈕隱藏
    slide.onmouseenter = function(){
        animate(arrow,{"opacity":100});
    }
    slide.onmouseleave = function(){
        animate(arrow,{"opacity":0});
    }
    //2.讓頁面加載出全部盒子的樣式
    move();
    //3.左右按鈕綁定函數(調用同一個方法，只有一個參數，true爲正向旋轉，false爲反向旋轉)
    left.onclick = function(){
        if (flag) {
            flag = false;
            move(true);
        }
        
    }
    right.onclick = function(){
        if (flag) {
            flag = false;
            move(false);
        }
        
    }
    //書寫函數
    //   操做函數：左按鈕：刪除第一個，添加到最後一個
    //   操做函數：右按鈕：刪除最後一個，添加到第一個
    function move(bool){
        //判斷bool是否認義
        if (bool !==undefined) {
        if (bool) {
            //左按鈕
            var ele = arr.shift();
            arr.push(ele);
            
        }else{
            //右按鈕
            var ele = arr.pop();
            arr.unshift(ele);
            
        }
    }
    for (var i = 0; i < liArr.length; i++) {
        //利用animate()框架屬性讓盒子運動到指定位置
        animate(liArr[i],{
            "width":arr[i].width,
            "top":arr[i].top,
            "left":arr[i].left,
            "opacity":arr[i].opacity,
            "zIndex":arr[i].z
        },function(){
            flag = true;//回調函數,全部程序執行完畢，再初始化flag的值true
        });
       
    };

    }
}
</script>
</body>
</html>

左右按鈕是在css裏邊經過背景設置的，圖片就不上傳了數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。