轮播图自动播放与交互-优快云博客

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style>
    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #banner {
        width: 730px;
        height: 454px;
        margin: 10px auto;
        position: relative;
        overflow: hidden;
    }
    
    #banner ol {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    
    #banner ol li {
        float: left;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        background: orange;
        margin-right: 5px;
        font-weight: bold;
    }
    
    #left,
    #right {
        position: absolute;
        top: 200px;
        width: 30px;
        height: 60px;
        background: #000;
        opacity: 0.8;
    }
    
    #left {
        left: 20px;
    }
    
    #right {
        right: 20px;
    }
    
    #banner ol li.bg {
        color: #000;
        background: red;
    }
    </style>
</head>

<body>
    <div id="banner">
        <ul>
            <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>
        </ul>
        <ol>
            <li class="bg">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <script>
    var banner, left, right, pics, nums;
    banner = document.getElementById("banner")
    left = document.getElementById("left")
    right = document.getElementById("right")
    pics = document.getElementsByTagName("ul")[0].getElementsByTagName("li")
    nums = document.getElementsByTagName("ol")[0].getElementsByTagName("li")

    //自动播放的开始
    var k
    k = 0

    function auto() {

        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""
        }

        k++;
        if (k > pics.length - 1) {
            k = 0
        }

        pics[k].style.display = "block"
        nums[k].className = "bg"


    }

    sl = setInterval(auto, 1000)

    //自动播放的结束

    //鼠标滑过对应的数字的时候，对应的图片出现开始
    for (var j = 0; j <= nums.length - 1; j++) {
        nums[j].index = j
        nums[j].onmouseover = function() {
            for (var i = 0; i <= pics.length - 1; i++) {

                pics[i].style.display = "none"
                nums[i].className = ""

            }

            pics[this.index].style.display = "block"
            this.className = "bg"
            k = this.index

        }
    }
    //鼠标滑过对应的数字的时候，对应的图片出现结束

    //单击上一张  下一张开始


    right.onclick = function() {

        k++;
        if (k > pics.length - 1) {
            k = 0
        }
        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""

        }

        pics[k].style.display = "block"
        nums[k].className = "bg"



    }


    left.onclick = function() {
        k--;
        if (k < 0) {
            k = pics.length - 1
        }
        for (var i = 0; i <= pics.length - 1; i++) {

            pics[i].style.display = "none"
            nums[i].className = ""

        }

        pics[k].style.display = "block"
        nums[k].className = "bg"

    }

    //单击上一张  下一张结束





    banner.onmouseover = function() {

        clearInterval(sl)
        left.style.display = "block"
        right.style.display = "block"
    }

    banner.onmouseout = function() {

        sl = setInterval(auto, 1000)
        left.style.display = "none"
        right.style.display = "none"
    }
    </script>
</body>

</html>
转载于:https://www.cnblogs.com/wysdddh/p/6260335.html