JavaScript实现轮播图

最新推荐文章于 2025-05-28 10:56:51 发布
原创最新推荐文章于 2025-05-28 10:56:51 发布 · 327 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#JavaScript #轮播图
本文介绍了一种使用JavaScript实现的轮播图效果，包括自动播放、手动点击切换、鼠标悬停暂停等功能，并通过CSS美化了轮播图的外观。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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>