JS特效——轮播图

最新推荐文章于 2023-12-13 10:37:44 发布

原创最新推荐文章于 2023-12-13 10:37:44 发布 · 409 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

这篇博客展示了如何利用JavaScript实现一个简单的图片轮播效果。通过设置CSS样式和JavaScript事件监听，实现在鼠标悬停时停止轮播，离开时恢复自动切换。代码中详细解释了每个关键部分的作用，包括图片的堆叠、按钮的生成和点击事件处理，以及定时器的管理。

<!DOCTYPE html>
<html>

<head>
    <title>新闻特效切换</title>
    <meta charset="utf-8">
    <style>
        #slideshow-wrapper {
            position: relative;
            padding: 0;
            background: #121212;
            width: 650px;
            height: 400px;
            overflow: hidden;
        }
        
        #slideshow-footbar {
            z-index: 5;
            position: absolute;
            opacity: 0.5;
            width: 100%;
            height: 30px;
            background: black;
            bottom: 0;
        }
        
        #slideshow-photo {
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        #slideshow-photo a {
            z-index: 1;
            position: absolute;
            margin: 0;
            top: 0;
            left: 0;
            display: block;
        }
        
        #slideshow-footbar .slideshow-bt {
            background: #d2d3d4;
            margin: 10px 10px 0 0;
            width: 10px;
            display: inline;
            float: right;
            height: 10px;
        }
        
        #slideshow-footbar .bt-on {
            background: blue;
        }
    </style>
</head>

<body>
    <div id="slideshow-wrapper">
        <div id="slideshow-photo">
            <a target="_blank" style="z-index: 2" href="#" index="1">
                <img src="http://img.zcool.cn/community/013dad554ba7be000001bf72cc05bf.jpg@2o.jpg">
            </a>
            <a target="_blank" style="z-index: 1" href="#" index="2">
                <img src="http://img.zcool.cn/community/010ab0554ba7bf000001bf72867e3b.jpg@2o.jpg">
            </a>
            <a target="_blank" style="z-index: 1" href="#" index="3">
                <img src="http://img.zcool.cn/community/01b020558c032c0000003264de904a.jpg@2o.jpg">
            </a>
            <a target="_blank" style="z-index: 1" href="#" index="4">
                <img src="http://img.zcool.cn/community/014872558c03b200000098b5bf3693.jpg@2o.jpg">
            </a>
            <a target="_blank" style="z-index: 1" href="#" index="5">
                <img src="http://img.zcool.cn/community/01fb9558e49702a801219c77debb30.jpg@1280w_1l_2o_100sh.webp">
            </a>
        </div>
        <div id="slideshow-footbar"></div>
    </div>

    <script>
        window.onload = init;
        let currIndex = 1;
        let timer = null;
        let wrapper = document.getElementById('slideshow-wrapper');
        // 鼠标移入移除事件
        wrapper.onmouseover = function() {
            clearInterval(timer);
        }

        wrapper.onmouseout = function() {
            timer = setInterval('common()', 3000);
        }

        function init() {
            let len = 5
            for (let i = 0; i < len; i++) {
                document.getElementById('slideshow-footbar').innerHTML +=
                    '<div class="slideshow-bt" index=' + (len - i) + '></div>'
            }
            let btns = document.getElementsByClassName('slideshow-bt');
            btns[len - 1].className += ' bt-on';
            for (let i = 0; i < btns.length; i++) {
                btns[i].onclick = function() {
                    slideTo(this.getAttribute('index'))
                }
            }
            timer = setInterval('common()', 3000);
        }
        // 把定时器封装到函数中以免代码重复
        function common() {
            // 判断是不是最后一张
            if (currIndex + 1 > 5) {
                currIndex = 1;
            } else {
                currIndex++;
            }
            slideTo(currIndex);
        }

        function slideTo(index) {
            index = parseInt(index);
            currIndex = index;
            let picArr = document.getElementById('slideshow-photo').childNodes;
            let btns = document.getElementsByClassName('slideshow-bt');
            for (let i = 0; i < picArr.length; i++) {
                if (picArr[i].nodeType === 1) {
                    if (parseInt(picArr[i].getAttribute('index')) === index) {
                        picArr[i].style.zIndex = 2;
                    } else {
                        picArr[i].style.zIndex = 1;
                    }
                }
            }
            for (let i = 0; i < btns.length; i++) {
                if (parseInt(btns[i].getAttribute('index')) === index) {
                    btns[i].className = 'slideshow-bt bt-on';
                } else {
                    btns[i].className = 'slideshow-bt';
                }
            }
        }
    </script>
</body>

</html>