首页 > > 网页制作 > css >

自己所做的一个轮播图案例，以供参考，欢迎指教

2018-06-24 00:59:28来源：未知阅读 ()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="pictures" id="pic">
    <ul>
        <li><a href="javascript:void(0);"><img src="images/33.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/33.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/22.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/11.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/55.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/44.jpg" alt=""/></a></li>
    </ul>
    <ol>
        <li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/2.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/4.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/5.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0);"><img src="images/1.jpg" alt=""/></a></li>
    </ol>
</div>
</body>
<script>
    //图片库开始
window.onload = function () {
    var config = [
        {
            "top": 0,
            "left": 0,
            "opacity": 0.3,
            "zIndex": 1
        },//0
        {
            "top": 120,
            "left": 100,
            "opacity": 0.5,
            "zIndex": 2
        },//1
        {
            //"width": 200,
            "top": 240,
            "left": 200,
            "opacity": 1,
            "zIndex": 3
        },//2
        {
            //"width": 150,
            "top": 320,
            "left": 100,
            "opacity": 0.5,
            "zIndex": 2
        },//3
        {
            //"width": 100,
            "top": 407,
            "left": 0,
            "opacity": 0.3,
            "zIndex": 1
        },//4
        {
            //"height":100,
            //"width": 100,
            "top": 407,
            "left": -200,
            "opacity": 0.3,
            "zIndex": 1
        },//5
        {
            //"width": 150,
            "top": 320,
            "left": -300,
            "opacity": 0.5,
            "zIndex": 2
        },//6
        {
            //"width": 200,
            "top": 240,
            "left": -400,
            "opacity": 1,
            "zIndex": 3
        },//7
        {
            //"width": 150,
            "top": 120,
            "left": -300,
            "opacity": 0.5,
            "zIndex": 2
        },//8
        {
            //"width": 100,
            "top": 0,
            "left": -200,
            "opacity": 0.3,
            "zIndex": 1
        },//9
    ];
    var pictures = document.getElementById("pic");
    var ul = pictures.children[0];
    var ulLis = ul.children;
    var ol = pictures.children[1];
    var olLis = ol.children;

    function assign() {
        for (var i = 0; i < ulLis.length; i++) {
            animate(ulLis[i], config[i]);
            flag = true;
        }
    }

    assign();
    var imgWidth = olLis[0].offsetWidth;
    var index = 0;
    var timer1 = null;
    var timer2 = null;
    timer1 = setInterval(function () {
        config.push(config.shift());
        //indexNum++;
        //console.log(indexNum);
        for (var i = 0; i < ulLis.length; i++) {
            animate(ulLis[i], config[i]);
        }
        index++;
        if (index == 6) {
            ol.style.left = 0;
            index = 1;
        }
    }, 4000);
    timer2 = setInterval(function () {
        if (index < 6) {
            var target = -imgWidth * index;
            cutton(ol, target, 20);
        }

    }, 2000);
    for (var k = 0; k < ulLis.length; k++) {
        ulLis[k].onmouseover = function () {
            clearInterval(timer1);
            clearInterval(timer2);
        }
        ulLis[k].onmouseout = function () {
            timer1 = setInterval(function () {
                config.push(config.shift());
                for (var i = 0; i < ulLis.length; i++) {
                    animate(ulLis[i], config[i]);
                }
                index++;
                if (index == 6) {
                    ol.style.left = 0;
                    index = 1;
                }
            }, 4000);
            timer2 = setInterval(function () {
                if (index < 6) {
                    var target = -imgWidth * index;
                    cutton(ol, target, 20);
                }

            }, 2000);
        }
    }
    //var indexNum = 0;
    var flag = true;
    for (var num = 0; num < ulLis.length; num++) {
        ulLis[num].onclick = function () {
            if (flag) {
                flag = false;
                if (this.offsetTop == 0) {
                    flag = true;
                    config.push(config.shift());
                    config.push(config.shift());
                    assign();
                    index = index + 2;
                    if (index == 6) {
                        ol.style.left = 0;
                        index = 1;
                    }
                    if (index < 6) {
                        var target = -imgWidth * index;
                        animate(ol, {left: target});
                    }
                    console.log(index);
                }//1
                if (this.offsetTop == 120) {
                    flag = true;
                    config.push(config.shift());
                    assign();
                    index = index + 1;
                    if (index == 6) {
                        ol.style.left = 0;
                        index = 1;
                    }
                    if (index < 6) {
                        var target = -imgWidth * index;
                        animate(ol, {left: target});
                    }
                }//2
                if (this.offsetTop == 320) {
                    flag = true;
                    //if (indexNum > 0) {
                    config.unshift(config.pop());
                    assign();
                    index = index - 1;
                    console.log(index);
                    if (index < 0) {
                        index = index + 5;
                    }
                    if (index == 6) {
                        ol.style.left = 0;
                        index = 1;
                    }
                    if (index < 6) {
                        var target = -imgWidth * index;
                        animate(ol, {left: target});
                    }
                    //indexNum = indexNum - 1;
                    // }
                }//4
                if (this.offsetTop == 407) {
                    flag = true;
                    //if (indexNum > 1) {
                    config.unshift(config.pop());
                    config.unshift(config.pop());
                    assign();
                    index = index - 2;
                    if (index < 0) {
                        index = index + 5;
                    }
                    if (index == 6) {
                        ol.style.left = 0;
                        index = 1;
                    }
                    if (index < 6) {
                        var target = -imgWidth * index;
                        animate(ol, {left: target});
                    }
                    //indexNum = indexNum - 2;
                    //}
                }//5
            }
        }
    }
}
//图片库结束
</script>
</html>