JS封裝動畫框架,網易輪播圖,旋轉輪播圖

時間 2019-11-12

原文原文鏈接

JS封裝動畫框架,網易輪播圖,旋轉輪播圖

1. JS封裝運動框架

// 多個屬性運動框架  添加回調函數
function animate(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  // 用來判斷是否中止定時器   必定寫到遍歷的外面
        for(var attr in json){   // attr  屬性     json[attr]  值
            //開始遍歷 json
            // 計算步長    用 target 位置 減去當前的位置  除以 10
            // console.log(attr);
            var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                // console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 數值
            }
            // console.log(current);
            // 目標位置就是  屬性值
            var step = ( json[attr] - current) / 10;  // 步長  用目標位置 - 如今的位置 / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判斷透明度
            if(attr == "opacity")  // 判斷用戶有沒有輸入 opacity
            {
                if("opacity" in obj.style)  // 判斷 咱們瀏覽器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current + step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current  + step + "px" ;
            }

            if(current != json[attr])  // 只要其中一個不知足條件 就不該該中止定時器  這句必定遍歷裏面
            {
                flag =  false;
            }
        }
        if(flag)  // 用於判判定時器的條件
        {
            clearInterval(obj.timer);
            // alert("ok了");
            if(fn)   // 很簡單   當定時器中止了。 動畫就結束了  若是有回調，就應該執行回調
            {
                fn(); // 函數名 +  （）  調用函數  執行函數
            }
        }
    },30)
}
function getStyle(obj,attr) {  //  誰的      那個屬性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回傳遞過來的某個屬性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 瀏覽器
    }
}

2. 網易輪播圖

效果圖

算是原理圖吧

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網易輪播圖</title>
    <link rel="stylesheet" href="css/css.css">

    <script src="js/myJS.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
    <div class="slider" id="slider">
        <div class="slider-main" id="slider_mian">
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/1.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/2.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/3.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/4.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/5.jpg" alt=""></a></div>
            <div class="slider-mian-img"><a href="javascript:;"><img src="images/6.jpg" alt=""></a></div>
        </div>
    </div>
    <div class="slider-ctrl" id="slider_ctrl">
        <span class="slider-ctrl-pre"></span>
        <span class="slider-ctrl-next"></span>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
img {
    vertical-align: bottom;
}
.box {
    width: 310px;
    height: 270px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.slider {
    width: 100%;
    height: 220px;
    background-color: red;
}
.slider-ctrl {
    text-align: center;
}
.slider-ctrl-con {
    display: inline-block;
    width: 35px;
    height: 20px;
    background: url("../images/icon.png") no-repeat -24px -782px;
    margin: 10px 0 0 5px;
    cursor: pointer;
    text-indent: 99em;
    overflow: hidden;
}
.current {
    background-position: -24px -762px;
}
.slider-ctrl-pre,
.slider-ctrl-next {
    position: absolute;
    top: 50%;
    margin-top: -35px;
    display: inline-block;
    width: 30px;
    height: 34px;
    background: url("../images/icon.png") no-repeat;
    opacity: 0.8;
    cursor: pointer;
}
.slider-ctrl-pre {
    left: 0;
    background-position: 5px top;
}
.slider-ctrl-next {
    right: 0;
    background-position: -4px -45px;
}
.slider-main {
    width: 200%;
    height: 100%;
    background-color: orange;
}
.slider-mian-img {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

window.onload = function () {
    var slider = $("slider");
    var slider_mian = $("slider_mian"); // 存放圖片的盒子
    var slider_main_imgs = slider_mian.children; // 圖片數組
    var slider_ctrl = $("slider_ctrl"); // pageControl
    var slider_ctrls = slider_ctrl.children;

    // 加載pageontrol
    for (var i=0;i<slider_main_imgs.length;i++) {
        var span = document.createElement("span");
        span.className = "slider-ctrl-con";
        span.innerHTML = slider_main_imgs.length - i;
        slider_ctrl.insertBefore(span,slider_ctrls[1]);
    }
    slider_ctrl.children[1].className = "slider-ctrl-con current";
    for (var i=1;i<slider_main_imgs.length;i++) {
        slider_main_imgs[i].style.left = slider.offsetWidth + "px";
    }

    // 添加點擊事件
    var showIndex = 0;
    for (var index in slider_ctrls) {
        slider_ctrls[index].onclick = function () {
            if (this.className == "slider-ctrl-pre") { // 點擊了左按鈕
                animate(slider_main_imgs[showIndex],{left:slider.offsetWidth});
                showIndex--;
                if (showIndex < 0) {
                    showIndex = slider_main_imgs.length - 1;
                }
                slider_main_imgs[showIndex].style.left = -slider.offsetWidth + "px";
                animate(slider_main_imgs[showIndex],{left:0});
            } else if (this.className == "slider-ctrl-next") { // 點擊了右按鈕
                autoPlay();
            } else { // 其餘按鈕
                // alert(showIndex);
                var willShow = this.innerHTML - 1;
                if (willShow > showIndex) { // 點擊了正在展現圖片的右側按鈕
                    // 將要顯示的圖片馬上定位到右面
                    slider_main_imgs[willShow].style.left = slider.offsetWidth + "px";
                    animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); // 當前圖片慢慢走出去
                    animate(slider_main_imgs[willShow],{left:0}); // 將要顯示的圖片慢慢進來
                    showIndex = willShow;
                } else if (willShow < showIndex) {
                    // 將要顯示的圖片馬上定位到左面
                    slider_main_imgs[willShow].style.left = -slider.offsetWidth + "px";
                    animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); // 當前的圖片慢慢走出去
                    animate(slider_main_imgs[willShow],{left:0}); // 將要顯示的圖片慢慢進來
                    showIndex = willShow;
                }
            }
            pageControl();
        }
    }

    // pageControl變化
    function pageControl() {
        for (var i=1;i<=slider_ctrls.length - 2;i++) {
            slider_ctrls[i].className = "slider-ctrl-con";
        }
        slider_ctrls[showIndex + 1].className = "slider-ctrl-con current";
    }

    // 開啓定時器
    var timer = null;
    timer = setInterval(autoPlay,3000);
    function autoPlay() {
        animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth});
        showIndex++;
        if (showIndex > slider_main_imgs.length - 1) {
            showIndex = 0;
        }
        slider_main_imgs[showIndex].style.left = slider.offsetWidth + "px";
        animate(slider_main_imgs[showIndex],{left:0});
        pageControl();
    }
    // 清除定時器
    $("js_box").onmouseover = function () {
        clearInterval(timer);
    }
    $("js_box").onmouseout = function () {
        clearInterval(timer);
        timer = setInterval(autoPlay,3000);
    }
}

2.旋轉輪播圖

效果圖

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋轉木馬輪播圖</title>
    <link rel="stylesheet" href="css/css.css">
    <script src="js/myJS.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
    <div class="slider" id="js_slider">
        <ul>
            <li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/slidepic6.jpg" alt=""></a></li>
        </ul>
    </div>
    <div class="arrow" id="js_arrow">
        <a href="javascript:;" class="pre"></a>
        <a href="javascript:;" class="next"></a>
    </div>
</div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
.slider {
    width: 1200px;
    height: 600px;
    margin: 100px auto;
    position: relative;
}
ul {
    width: 100%;
    height: 100%;
}
ul li {
    position: absolute;
    top: 100px;
    left: 200px;
}
ul li img {
    width: 100%;
}
.arrow {
    width: 100%;
    background-color: orange;
    opacity: 0;
    position: absolute;
    top: 50px;
}
.pre,.next {
    width: 76px;
    height: 112px;
    position: absolute;
    background: url("../images/prev.png") no-repeat;
    top: 0;
}
.pre {
    left: 0;
}
.next {
    right: 0;
    background: url("../images/next.png") no-repeat;
}

JavaScript

window.onload = function () {
    var arrow = $("js_arrow"); // 左右按鈕的盒子,總體控制左右按鈕的顯示與隱藏
    var box = $("js_box");
    var lis = $("js_slider").children[0].children; // 圖片集合
    var pre = arrow.children[0]; // 左按鈕
    var next = arrow.children[1]; // 右按鈕
    box.onmouseover = function () {
        animate(arrow,{opacity:100});
    }
    box.onmouseout = function () {
        animate(arrow,{opacity:0});
    }
    //  存儲了每一個圖片的信息
    var json = [
        {   //  1
            width:400,
            top:20,
            left:50,
            opacity:20,
            zIndex:2
        },
        {  // 2
            width:550,
            top:70,
            left:0,
            opacity:80,
            zIndex:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            zIndex:4
        },
        {  // 4
            width:550,
            top:70,
            left:600,
            opacity:80,
            zIndex:3
        },
        {   //5
            width:400,
            top:20,
            left:750,
            opacity:20,
            zIndex:2
        },
        {   //6
            width:350,
            top:0,
            left:425,
            opacity:10,
            zIndex:1
        }
    ];
    var flag = true; // 控制動畫的標記
    change();
    pre.onclick = function () {
        if (flag == true) { // flag爲true時才能夠作動畫
            json.push(json.shift()); // 交換json
            flag = false; // 當即將flag修改成false,來控制動畫
            change();
        }
    }
    next.onclick = function () {
        if (flag == true) {
            json.unshift(json.pop());
            flag = false;
            change();
        }
    }

    function change() {
        for (var i=0;i<lis.length;i++) {
            animate(lis[i],json[i],function () {
                // 回調函數,修改控制動畫的標記
                flag = true;
            });
        }
    }
}

相關標籤/搜索

每日一句

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