JavaScript实现轮播图

来源：互联网发布：创建一维数组编辑：程序博客网时间：2024/06/05 10:27
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>JavaScript实现轮播图</title>    <style type="text/css">    #container {        position: relative;        width: 600px;        height: 500px;        overflow: hidden;        margin: 0 auto;        margin-bottom: 20px;    }    /*图样式开始*/        #list {        position: absolute;        z-index: 1;        width: 6000px;        height: 400px;    }        #list img {        float: left;        width: 580px;        height: 400px;        padding: 50px 10px;        background-color: black;    }    /*图样式结束*/    /*小点开始*/        #buttons {        position: absolute;        z-index: 2;        height: 10px;        width: 160px;        bottom: 20px;        left: 250px;        display: none;    }        #buttons span {        cursor: pointer;        float: left;        border: 1px solid #fff;        width: 10px;        height: 10px;        border-radius: 50%;        background: #333;        margin-left: 5px;    }        #buttons .on {        background: orangered;    }    /*小点结束*/    /*小图开始*/        #buttons2 {        position: absolute;        z-index: 2;        height: 200px;        width: 900px;        bottom: -100px;        left: 250px;    }        #buttons2 img {        cursor: pointer;        float: left;        border: 1px solid green;        width: 80px;        height: 50px;        padding: 10px;        background: #333;    }        #buttons2 .on2 {        background: green;    }    /*小图结束*/    /*箭头样式开始*/        .arrow {        display: none;        position: absolute;        z-index: 2;        top: 230px;        cursor: pointer;        font-size: 36px;        line-height: 39px;        text-align: center;        font-weight: bold;        width: 40px;        height: 40px;        background-color: rgba(0, 0, 0, .3);        color: #fff;    }        .arrow:hover {        background-color: rgba(0, 0, 0, .7);    }        #container:hover .arrow {        display: block;    }        #prev {        left: 10px;    }        #next {        right: 10px;    }    /*箭头样式结束*/        .xiali {        width: 656px;        margin: 0 auto;        background-color: #d5f3a5;        font-size: 0;    }        .xiali img {        width: 80px;        height: 50px;        border: 1px solid black;    }        .xiali a:hover {        cursor: pointer;    }    </style>    <script type="text/javascript">    window.onload = function() {        var container = document.getElementById("container");        var list = document.getElementById("list");        var buttons = document.getElementById("buttons").getElementsByTagName("span");        var prev = document.getElementById('prev');        var next = document.getElementById("next");        var index = 1;        var imgs = document.getElementById("buttons2").getElementsByTagName('img');        var buttons2 = document.getElementById("buttons2").getElementsByTagName("span");        var timer;        // 箭头切换开始        function animate(offset) {            var newLeft = parseInt(list.style.left) + offset;            list.style.left = newLeft + "px";            if (newLeft < -4800) {                list.style.left = -600 + "px";            } else if (newLeft > -600) {                list.style.left = -4800 + "px";            }        }        // 自动播放        function play() {        timer = setInterval(function () {        next.onclick();        },1000);        }        function stop() {        clearInterval(timer);        }        // 自动播放        prev.onclick = function() {            animate(600);            if (index == 1) {                index = 8;            } else {                index -= 1;            }            showButton();            showButton2()        }        next.onclick = function() {            animate(-600);            if (index == 8) {                index = 1;            } else {                index += 1;            }            showButton();            showButton2()        }        // 箭头切换结束        // 小点切换开始        function showButton() {            for (var i = 0; i < buttons.length; i++) {                if (buttons[i].className == 'on') {                    buttons[i].className = '';                    break;                }            }            buttons[index - 1].className = 'on';        }        for (var i = 0; i < buttons.length; i++) {            buttons[i].onclick = function() {            if (this.className=='on') {            return;            }                var myIndex = parseInt(this.getAttribute('index'));                var offset = -600 * (myIndex - index);                animate(offset);                index = myIndex;                showButton();            }        }        // 小点切换结束        // 小图切换开始        function showButton2() {            for (var i = 0; i < imgs.length; i++) {                if (imgs[i].className == 'on2') {                    imgs[i].className = '';                    break;                }            }            imgs[index - 1].className = 'on2';        }        for (var i = 0; i < buttons2.length; i++) {            buttons2[i].onclick = function() {            if (this.className=='on') {            return;            }                var myIndex = parseInt(this.getAttribute('index'));                var offset = -600 * (myIndex - index);                animate(offset);                index = myIndex;                showButton2();            }        }        // 小图切换结束        // 自动播放开始        container.onmouseover = stop;        container.onmouseout = play;        play();        // 自动播放结束    }    </script></head><body>    <div id="container">        <div id="list" style="left: -600px;">            <img src="images/large/8.jpg">            <img src="images/large/1.jpg">            <img src="images/large/2.jpg">            <img src="images/large/3.jpg">            <img src="images/large/4.jpg">            <img src="images/large/5.jpg">            <img src="images/large/6.jpg">            <img src="images/large/7.jpg">            <img src="images/large/8.jpg">            <img src="images/large/1.jpg">        </div>        <!-- 小点切换开始 -->        <div id="buttons">            <span index="1" class="on"></span>            <span index="2"></span>            <span index="3"></span>            <span index="4"></span>            <span index="5"></span>            <span index="6"></span>            <span index="7"></span>            <span index="8"></span>        </div>        <!-- 小点切换结束 -->        <!-- 左右切换开始 -->        <a href="javascript:;" class="arrow" id="prev"><</a>        <a href="javascript:;" class="arrow" id="next">></a>        <!-- 左右切换结束 -->    </div>    <!-- 小图切换开始 -->    <div id="buttons2">        <span index="1"><img class="on2" src="images/small/1.jpg"></span>        <span index="2"><img src="images/small/2.jpg"></span>        <span index="3"><img src="images/small/3.jpg"></span>        <span index="4"><img src="images/small/4.jpg"></span>        <span index="5"><img src="images/small/5.jpg"></span>        <span index="6"><img src="images/small/6.jpg"></span>        <span index="7"><img src="images/small/7.jpg"></span>        <span index="8"><img src="images/small/8.jpg"></span>    </div>    <!-- 小图切换结束 --></body></html>
阅读全文
0 0