js輪播圖

時間 2019-11-13

原文原文鏈接

//嘗試建立一個能夠執行簡單動畫的函數
/*
 * 參數：
 *     obj:要執行動畫的對象
 *     attr:要執行動畫的樣式，好比：left top width height
 *     target:執行動畫的目標位置
 *     speed:移動的速度(正數向右移動，負數向左移動)
 *  callback:回調函數，這個函數將會在動畫執行完畢之後執行
 */
function move(obj, attr, target, speed, callback) {
    //關閉上一個定時器
    clearInterval(obj.timer);

    //獲取元素目前的位置
    var current = parseInt(getStyle(obj, attr));

    //判斷速度的正負值
    //若是從0 向 800移動，則speed爲正
    //若是從800向0移動，則speed爲負
    if(current > target) {
        //此時速度應爲負值
        speed = -speed;
    }

    //開啓一個定時器，用來執行動畫效果
    //向執行動畫的對象中添加一個timer屬性，用來保存它本身的定時器的標識
    obj.timer = setInterval(function() {

        //獲取box1的原來的left值
        var oldValue = parseInt(getStyle(obj, attr));

        //在舊值的基礎上增長
        var newValue = oldValue + speed;

        //判斷newValue是否大於800
        //從800 向 0移動
        //向左移動時，須要判斷newValue是否小於target
        //向右移動時，須要判斷newValue是否大於target
        if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }

        //將新值設置給box1
        obj.style[attr] = newValue + "px";

        //當元素移動到0px時，使其中止執行動畫
        if(newValue == target) {
            //達到目標，關閉定時器
            clearInterval(obj.timer);
            //動畫執行完畢，調用回調函數
            callback && callback();
        }

    }, 30);
}

/*
 * 定義一個函數，用來獲取指定元素的當前的樣式
 * 參數：
 *         obj 要獲取樣式的元素
 *         name 要獲取的樣式名
 */
function getStyle(obj, name) {

    if(window.getComputedStyle) {
        //正常瀏覽器的方式，具備getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        //IE8的方式，沒有getComputedStyle()方法
        return obj.currentStyle[name];
    }

}

//定義一個函數，用來向一個元素中添加指定的class屬性值
/*
 * 參數:
 *     obj 要添加class屬性的元素
 *  cn 要添加的class值
 *     
 */
function addClass(obj, cn) {

    //檢查obj中是否含有cn
    if(!hasClass(obj, cn)) {
        obj.className += " " + cn;
    }

}

/*
 * 判斷一個元素中是否含有指定的class屬性值
 *     若是有該class，則返回true，沒有則返回false
 *     
 */
function hasClass(obj, cn) {

    //判斷obj中有沒有cn class
    //建立一個正則表達式
    //var reg = /\bb2\b/;
    var reg = new RegExp("\\b" + cn + "\\b");

    return reg.test(obj.className);

}

/*
 * 刪除一個元素中的指定的class屬性
 */
function removeClass(obj, cn) {
    //建立一個正則表達式
    var reg = new RegExp("\\b" + cn + "\\b");

    //刪除class
    obj.className = obj.className.replace(reg, "");

}

/*
 * toggleClass能夠用來切換一個類
 *     若是元素中具備該類，則刪除
 *     若是元素中沒有該類，則添加
 */
function toggleClass(obj, cn) {

    //判斷obj中是否含有cn
    if(hasClass(obj, cn)) {
        //有，則刪除
        removeClass(obj, cn);
    } else {
        //沒有，則添加
        addClass(obj, cn);
    }

}

js/tools.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>輪播圖</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            #outer{
                height: 333px;
                width: 520px;
                margin: 50px auto;
                background-color: yellowgreen;
                padding: 10px 0;
                position: relative;
                overflow: hidden;
            }
            #imgList{
                list-style: none;
                
                position: absolute;
                left: 0px;
            }
            #imgList li{
                float: left;
                margin: 0px 10px;
            }
            #navDiv{
                position: absolute;
                bottom: 15px;
            }
            #navDiv a{
                /*設置超連接浮動*/
                float: left;
                /*設置超連接的寬和高*/
                width: 15px;
                height: 15px;
                /*設置背景顏色*/
                background-color: red;
                /*設置左右外邊距*/
                margin: 0 5px;
                /*設置透明*/
                opacity: 0.5;
                /*兼容IE8透明*/
                filter: alpha(opacity=50);
            }
            #navDiv a:hover{
                background-color: black;
            }

        </style>
        <script type="text/javascript" src="js/tools.js">
        </script>
        <script type="text/javascript">
            window.onload=function(){
                var imgList=document.getElementById("imgList");
                var imgArr=document.getElementsByTagName("img");
                imgList.style.width=520*imgArr.length+"px";
                var navDiv=document.getElementById("navDiv");
                var outer=document.getElementById("outer");
                navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px";
                var allA=document.getElementsByTagName("a");
                var index=0;
                var timer;
                allA[index].style.backgroundColor="black";
                for(var i=0;i<allA.length;i++){
                    allA[i].num=i;
                    allA[i].onclick=function(){
                        clearInterval(timer);    
                        index=this.num;
                        //imgList.style.left="-520*index"+"px";
                        setA();
                        move(imgList , "left" , -520*index , 20 , function(){
                            autoChange();
                        });
                    }
                }
                            autoChange();
                function setA(){
                    for(var i=0;i<allA.length;i++){
                        allA[i].style.backgroundColor="";
                        
                    }
                    allA[index].style.backgroundColor="black";
                }
                
                function autoChange(){
                    timer=setInterval(function(){
                        index++;
                        index%=imgArr.length;
                        move(imgList,"left",-520*index,20,function(){
                            setA();
                        })
                    },3000);
                }
                
            }
        </script>
    </head>
    <body>
        <div id="outer">
            <ul id="imgList">
                <li><img src="img/1.jpg"/></li>
                <li><img src="img/2.jpg"/></li>
                <li><img src="img/3.jpg"/></li>
                <li><img src="img/4.jpg"/></li>
                <li><img src="img/5.jpg"/></li>
                <li><img src="img/1.jpg"/></li>
                
            </ul>
            <div id="navDiv">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

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