JavaScript轮番图

吐个泡泡~~

已于 2022-03-14 17:00:50 修改

阅读量2.5k

点赞数 9

分类专栏： JavaScript 文章标签： css css3 javascript

于 2022-03-14 09:14:07 首次发布

本文链接：https://blog.csdn.net/m0_56712012/article/details/123396370

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

来看看之前没有实现的网页轮番图，现在能实现了吗？

👉首先还是看看做轮番图想要哪些需求吧

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。
2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
3.图片播放的同时，下面小圆圈模块跟随一起变化。
4.点击小圆圈，可以播放相应图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。
6.鼠标经过，轮播图模块，自动播放停止。

现在就开始搭建html和css,我已经写好了一起看看吧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./JS/animate.js"></script>
    <script src="./JS/index.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        li {
            list-style: none;
        }
        
        img {
            border: 0;
            vertical-align: middle;
        }
        
        a {
            text-decoration: none;
            color: #666;
        }
        
        .focus {
            position: relative;
            margin: 100px auto;
            width: 500px;
            height: 400px;
            overflow: hidden;//记得把多出来的图片隐藏哦
        }
        
        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 500%;//给ul足够的宽度,给li浮动,小li才能显示在同一行
        }
        
        .focus ul li {
            float: left;
            transform: translateZ(0);
        }
        
        .focus ul li img {
            width: 500px;
            height: 400px;
        }
        
        .focus ol {
            position: absolute;
            width: 145px;
            height: 13px;
            bottom: 12px;
            left: 45%;
            margin-left: -35px;
        }
        
        ol li {
            float: left;
            width: 20px;
            height: 5px;
            margin: 3px;
            background-color: #666565;
            padding-right: 5px;
        }
        
        ol .current {
            background-color: #fff;
        }
        
        .nav .selected {
            background-color: #f50;
        }
        
        .prev,
        .next {
            /* 绝对定位 */
            position: absolute;
            width: 20px;
            height: 40px;
            background-color: rgba(0, 0, 0, .3);
            top: 50%;
            margin-top: -15px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            /* display: none; */
            z-index: 2;
        }
        
        .prev {
            left: 0;
        }
        
        .next {
            right: 0;
        }
        
        .prev,
        .next {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="focus">
        <a href="javascript:;" class="prev">&lt; </a>
        <a href="javascript:;" class="next">&gt; </a>
        <ul>
            <li>
                <img src="./img/1.jpg" alt="">
            </li>
            <li>
                <img src="./img/2.jpg" alt="">

            </li>
            <li>
                <img src="./img/3.jpg" alt="">

            </li>
            <li>
                <img src="./img/4.jpg" alt="">

            </li>

        </ul>
        <ol class="circle">

        </ol>
</body>

</html>

其次该封装js代码了,在封装js代码之前,要先引入一个动画的js封装:animate.js
动画js封装代码如下:

// 封装函数
function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

轮番图的js封装代码如下:

window.addEventListener('load', function() {
    // 1.获取元素
    // 获取左右按钮
    var prev = this.document.querySelector('.prev')
    var next = this.document.querySelector('.next')
        // 获取轮番图
    var focus = this.document.querySelector('.focus')
    var focusWidth = focus.offsetWidth
        // 鼠标经过轮番图显示左右按钮
    focus.addEventListener('mouseenter', function() {
            prev.style.display = 'block'
            next.style.display = 'block'
            clearInterval(timer)
            timer = null //清除定时器变量
        })
        // 离开
    focus.addEventListener('mouseleave', function() {
            prev.style.display = 'none'
            next.style.display = 'none'
            timer = setInterval(function() {
                // 手动点击事件
                next.click()
            }, 2000)
        })
        // 动态小圆圈
    var ul = focus.querySelector('ul')
    var ol = focus.querySelector('.circle')

    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个li 节点
        var li = document.createElement('li')
            // 记录小圆圈的索引号
        li.setAttribute('index', i)
            // 把li插入ol里面 节点
        ol.appendChild(li)
            // 排他思想 点击小圆圈 添加类 其余移除   
        li.addEventListener('click', function() {
            // 把所有的小li 清除类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            // 当前小li 设置类名
            this.className = 'current'
                // 点击小圆圈移动图片 ul移动
                // 点击某个小li就拿到那个小li的索引号
            var index = this.getAttribute('index')
                // 点击某个小li 就拿到当前li的索引号给circle num
            num = circle = index

            console.log(focusWidth)
            console.log(index)
            animate(ul, -index * focusWidth)
        })
    }
    // 把ol里面的类名设为current
    ol.children[0].className = 'current'
        // 克隆第一张图片li 放到ul后面
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)

    // 点击右侧按钮图片滑动一张
    var num = 0
    var circle = 0

    next.addEventListener('click', function() {
            // 无缝滑动
            // 如果走到了最后复制一张图片 ul快速复原left为0
            if (num == ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++
            animate(ul, -num * focusWidth)
                // 点击右侧按钮 小圆圈一起变换
            circle++
            // 
            if (circle == ol.children.length) {
                circle = 0
            }
            circleChange()
        })
        // 左侧按钮
    prev.addEventListener('click', function() {
            // 无缝滑动
            // 如果走到了最后复制一张图片 ul快速复原left为0
            if (num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * focusWidth + 'px'
            }
            num--
            animate(ul, -num * focusWidth)
                // 点击右侧按钮 小圆圈一起变换
            circle--
            // 先清除其余小圆圈的类名
            // if (circle < 0) {
            //     circle = ol.children.length - 1
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle
                // 调用函数
            circleChange()
        })
        // 封装函数
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        ol.children[circle].className = 'current'
    }
    // 自动播放轮播图
    var timer = this.setInterval(function() {
        // 手动点击事件
        next.click()
    }, 2000)
})

好了,现在我们的轮番图就实现了,一起来看看效果吧
在这里插入图片描述

吐个泡泡~~

关注

9
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
JavaScript轮番图

来看看之前没有实现的网页轮番图，现在能实现了吗？👉首先还是看看做轮番图想要哪些需求吧1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。3.图片播放的同时，下面小圆圈模块跟随一起变化。4.点击小圆圈，可以播放相应图片。5.鼠标不经过轮播图，轮播图也会自动播放图片。6.鼠标经过，轮播图模块，自动播放停止。现在就开始搭建html和css,我已经写好了一起看看吧<!DOCTYPE html><htm
复制链接

扫一扫