原生JS-旋轉木馬

標籤：position   round   parse   repeat   圖片   測試   asc   null   cli   

 

原生JS-旋轉木馬

今天寫一個原生JS寫的旋轉木馬JS效果。

實現原理：

1.建立一個數組給每一張圖片寫對應的z-index，opacity，top，width；

2.實現旋轉的操作是把建造的數組裡面的第一組值放到最後一組，點下按鈕就執行一次。

顯示：

 

html布局：

<div class="wrap" id="wrap">    <div class="slide" id="slide">        <ul>            <li><a href=""><img src="images/logo.png" width="900" height="500" ></a></li>            <li><a href=""><img src="images/slide.jpg" width="900" height="500" ></a></li>            <li><a href=""><img src="images/slide2.jpg" width="900" height="500" ></a></li>            <li><a href=""><img src="images/i1.jpg" width="900" height="500" ></a></li>            <li><a href=""><img src="images/sto.jpg" width="900" height="500" ></a></li>        </ul>        <div class="arrow" id="arrow">            <a href="javascript:;" id="arrLeft" class="prev"></a>            <a href="javascript:;" id="arrRight" class="next"></a>        </div>    </div></div>

css樣式：

 * {            margin: 0;            padding: 0;        }        ul {            list-style: none;        }        .wrap {            width: 1200px;            margin: 100px auto;        }        .slide {            height: 500px;            position: relative;            width: 1200px;        }        .slide ul li {            position: absolute;            top: 0;            left: 0;            z-index: 1;        }        .slide li img {            width: 100%;        }        .arrow {            position: absolute;            width: 100%;            top: 50%;            opacity: 0;            z-index: 3;        }        .prev,        .next {            position: absolute;            height: 110px;            width: 110px;            border-radius: 50%;            top: 50%;            //margin-top: -56px;            overflow: hidden;            text-decoration: none;        }        .prev{            left: 0;            background: url("images/slider-icons.png") no-repeat left top;        }        .next{            right: 0;            background: url("images/slider-icons.png") no-repeat right top;        }

JS部分：

接下來我們先把對應圖片的樣式存放到一個數組裡面。

 

 //寫每張圖片對應的樣式    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"); //拿到所有li        function assign() {    //分配函數            for (var i=0;i<list.length;i++){                animate(list[i],config[i],function () {                    flag=true;                });            }        }        assign();

滑鼠進入和離開會有有左右箭頭的顯示和隱藏，點擊按鈕旋轉的原理即改變數組第一個放在最後或把最後一組放在第一個。其中的flag為控制點擊按鈕時確保一組動畫完成後才能繼續執行下一個旋轉動畫。

   //滑鼠進入，左右焦點的div顯示        my$("wrap").onmouseover=function () {            animate(my$("arrow"),{"opacity":1});        };        //滑鼠離開，左右焦點的div隱藏        my$("wrap").onmouseout=function () {            animate(my$("arrow"),{"opacity":0});        };        //點擊右邊按鈕事件        my$("arrRight").onclick=function () {            if (flag){                flag=false;                config.push(config.shift());     //把第一組值放到最後一組                assign();            }        };        //點擊左邊按鈕事件        my$("arrLeft").onclick=function () {            if (flag){                flag=false;                config.unshift(config.pop());   //把最後一組值放到第一組                assign();            }        };    };

完整JS代碼：

<script>    //變速動畫函數    function animate(element, json, fn) {        clearInterval(element.timeId);   //清理定時器        element.timeId = setInterval(function () {            var flag = true;    //假設預設為當前值已經等於目標值            for (var arrt in json) {                if (arrt == "opacity") {   //如果屬性值為opacity                    var current = getStyle(element, arrt) * 100;   //current和target先擴大100倍                    target = json[arrt] * 100;                    var step = (target - current) / 10;                    step = step > 0 ? Math.ceil(step) : Math.floor(step);                    current += step;                    element.style[arrt] = current / 100;   //運算完後縮小100倍                } else if (arrt == "zIndex") {   //如果屬性值為zindex                    element.style[arrt] = json[arrt];                } else {      //普通屬性                    var current = parseInt(getStyle(element, arrt));                    target = json[arrt];                    var step = (target - current) / 10;                    step = step > 0 ? Math.ceil(step) : Math.floor(step); //step大於零向上取整，小於零向下取整                    current += step;                    element.style[arrt] = current + "px";                }                if (current != target) {                    flag = false;                }            }            if (flag) {    //只有所有屬性的當前值已經等於目標值，才清理定時器                clearInterval(element.timeId);                if (fn) {     //回呼函數                    fn();                }            }            console.log("當前位置：" + current + "目標位置：" + target + " 移動步數：" + step);   //測試函數        }, 20);    }    function getStyle(element, arrt) {        return window.getComputedStyle ? window.getComputedStyle(element, null)[arrt] : element.currentStyle[arrt];    }    function my$(id) {        return document.getElementById(id);    }    //寫每張圖片對應的樣式    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 flag=true;     //假設動畫全部執行完畢-----鎖    //頁面載入的事件    window.onload=function () {        //1---散開圖片        var list=my$("slide").getElementsByTagName("li"); //拿到所有li        function assign() {    //分配函數            for (var i=0;i<list.length;i++){                animate(list[i],config[i],function () {                    flag=true;                });            }        }        assign();        //滑鼠進入，左右焦點的div顯示        my$("wrap").onmouseover=function () {            animate(my$("arrow"),{"opacity":1});        };        //滑鼠離開，左右焦點的div隱藏        my$("wrap").onmouseout=function () {            animate(my$("arrow"),{"opacity":0});        };        //點擊右邊按鈕事件        my$("arrRight").onclick=function () {            if (flag){                flag=false;                config.push(config.shift());     //把第一組值放到最後一組                assign();            }        };        //點擊左邊按鈕事件        my$("arrLeft").onclick=function () {            if (flag){                flag=false;                config.unshift(config.pop());   //把最後一組值放到第一組                assign();            }        };    };</script>

 

原生JS-旋轉木馬