1. 技术文章
  2. js图片轮播（翻页切换）

js图片轮播（翻页切换）

由 大城市里の小女人 提交于 2019-12-06 02:54:55

前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡出是比较难的，但只要用心，仔细的体会核心思想，一步步来，相信还是可以很好地掌握的！

<!DOCTYPE html>
<html lang="en">
<!-- 主要思想  结合无缝轮播，使得图片可以完成循环，利用计时器，切换页面，其中，切换的核心思想为margin值
的固定变化来实现图片的张张切换 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片轮播</title>
    <!-- 利用margin-left的值的操作来实现图片的滚动 而不是之前的滚动条移动左边距 -->
    <style>
        .all {
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .block {
            width: 700px;
            height: 400px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .block>div:nth-child(1) {
            width: 4900px;
            height: 400px;
            margin-left: 0px;
        }

        .block>div>img {
            float: left;
            width: 700px;
            height: 400px;
        }

        .nowpage {
            transition: margin-left 0.5s ease-in-out;
        }

        .point {
            position: absolute;
            width: 108px;
            height: 15px;
            bottom: 20px;
            left: 296px;
        }

        .point>div {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: white;
            float: left;
            margin: 0 2px;
            border: 2px solid black;
            box-sizing: border-box;
        }

        .btn_left {
            width: 20px;
            height: 40px;
            background-color: rgba(158, 155, 155, 0.301);
            position: absolute;
            z-index: 9999;
            left: 0;
            top: 155px;
            text-align: center;
            line-height: 40px;
            color: rgba(250, 235, 215, 0.452);
            cursor: pointer;
        }

        .btn_left:hover {
            background-color: rgb(109, 101, 101);
        }

        .btn_right {
            width: 20px;
            height: 40px;
            background-color: rgba(158, 155, 155, 0.301);
            position: absolute;
            z-index: 9999;
            right: 0px;
            top: 155px;
            text-align: center;
            line-height: 40px;
            color: rgba(250, 235, 215, 0.452);
            cursor: pointer;
        }

        .btn_right:hover {
            background-color: rgb(109, 101, 101);
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="block">
            <div>
                <img src="./img/1.jpg" alt="">
                <img src="./img/2.jpg" alt="">
                <img src="./img/3.jpg" alt="">
                <img src="./img/4.jpg" alt="">
                <img src="./img/5.jpg" alt="">
                <img src="./img/6.jpg" alt="">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="point">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="btn_left">
            <</div> <div class="btn_right">>
        </div>
    </div>

    <script>
        var block = document.getElementsByClassName('block')[0];
        var block_child = block.children[0];
        var point = document.getElementsByClassName('point')[0].children;
        var btn_left = document.getElementsByClassName('btn_left')[0];
        var btn_right = document.getElementsByClassName('btn_right')[0];
        var count = 0;
        var time;
        point[0].style.backgroundColor = 'black';
        window.onload = showpage();
// 总函数，在页面加载完成后执行，由于位置已经在页面内容之下，所以可以直接调用
        function showpage() {
            time = setInterval(function () {
                page_onice();
            }, 2500)
        }
// 将所有的函数都封装，方便调用
// 执行一次的函数
        function page_onice() {
            block_child.className = 'nowpage';
            point[count].style.backgroundColor = 'white';
            count++;
            var index = count >= block_child.children.length - 1 ? 0 : count;
            // index为当前的索引
            point[index].style.backgroundColor = 'black';
            block_child.style.marginLeft = (-700 * count) + 'px';
            // 显示当前的图片
            setTimeout(function () {
                if (count >= block_child.children.length - 1) {
                    count = 0;
                    block_child.className = '';
                    block_child.style.marginLeft = '0px';
                }
            }, 500)
            // 重点，动画完成执行以消除动画不执行bug
        }
        
        // 点击事件 功能优化
        block_child.onmouseenter = function () {
            clearInterval(time);
        }
        // 当鼠标进入时，停止计时器
        block_child.onmouseleave = function () {
            showpage();
            // 鼠标离开，开始计时器
        }
        btn_left.onclick = function () {
            point[count].style.backgroundColor = 'white';
            count--;
            if (count < 0) {
                block_child.className = '';
                count = 5;// 由于共有7张图，但是最后一张与第一张相同，所有只需从0~5
                block_child.style.marginLeft = '-4200px';
                // 重点，count=5时，最后一张图切完，现在显示为第七张图，然后切到第一张图，实现循环
                setTimeout(function () {
                    block_child.className = 'nowpage';
                    block_child.style.marginLeft = (-700 * count) + 'px';
                }, 1)//动画完成  1ms可以忽略不计
            } else {
                block_child.className = 'nowpage';
                block_child.style.marginLeft = (-700 * count) + 'px';
                // 因为是margin值，所以不分方向，只需要移动到相应的位置即可
                // 好像在哪说过这些话
            }
            point[count].style.backgroundColor = 'black';
            当前的图片对应点变色
        }
        btn_left.onmouseenter = function () {
            clearInterval(time);
        }
        btn_left.onmouseleave = function () {
            showpage();
        }
        // 当鼠标进入btn时，停止计时器
        // 出去时，开始计时器  下同
        // 老实说，右比左简单多了！
        btn_right.onclick = function () {
            page_onice();
        }
        btn_right.onmouseenter = function () {
            clearInterval(time);
        }
        btn_right.onmouseleave = function () {
            showpage();
        }
// 由于是用margin值来移动图片的，所以不用考虑左右的区别，只是移动距离的关系
// 这个比之前用层实现轮播简单多了
for (var i = 0; i < point.length; i++) {
            point[i].index = i;
            point[i].onmouseenter = function () {
                // console.log(1);
                block_child.className = 'nowpage';
                block_child.style.marginLeft = (-700 * this.index) + 'px';
                point[count].style.backgroundColor = 'white';
                this.style.backgroundColor = 'black';
                count = this.index;
            }
        }

        // 消除切换页面bug  
        // 页面可见性事件
        document.addEventListener('visibilitychange', function () {
            if (!document['hidden']) {
                showpage();
            } else {
                clearInterval(time);
            }
        });
        document.onselectstart = function () {
            return false;
        }//阻止用户复制
    </script>
</body>

</html>

这真的是心最累的一次注释，下一篇立体轮播图希望能活着写完！（皮一下很头疼）

标签
轮播
js
block
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!