网页轮播图

一夕ξ

已于 2022-03-11 22:08:04 修改

阅读量900

点赞数 1

分类专栏：前端学习文章标签： css html javascript

于 2022-03-09 22:29:47 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123363691

版权

前端学习专栏收录该内容

77 篇文章 7 订阅

订阅专栏

1、点击左右按钮，页面实现滚动效果

2、点击下方焦点，图片也开始滚动切换

不能用z-index来改变图片的相应级别，因为要使用滚动切换，（移动）。

bug很多

<!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>
    <style>
        .box {
            width: 600px;
            height: 300px;
            position: relative;
            overflow: hidden;
            margin-left: 0px;
            padding-left: 0px;
            margin: 30px auto
        }
        
        .box img {
            /* display: none; */
            width: 600px;
            height: 300px;
            float: left;
            margin-left: 0px;
        }
        
        .box1 {
            /* display: inline-block; */
            width: 1900px;
            height: 300px;
            position: absolute;
            top: 0px;
            left: -600px;
            padding: 0px
        }
        
        .left,
        .right {
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.3);
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            position: absolute;
            top: 135px;
        }
        
        .left {
            left: 0px
        }
        
        .right {
            left: 570px
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            <img src="https://img0.baidu.com/it/u=3249059478,3438607495&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500" alt="" class="im1">
            <img src="https://img2.baidu.com/it/u=282419407,1896681766&fm=26&fmt=auto" alt="" class="im2">
            <img src="https://img0.baidu.com/it/u=3476682447,114963827&fm=26&fmt=auto" alt="" class="im3">
        </div>
        <!-- 放左右按钮 相对定位-->
        <div class="left">←</div>
        <div class="right">→</div>
    </div>
    <script>
        // document.querySelector('.box1').style.left = document.querySelector('img').offsetLeft + 'px';
        //改变box1的left值，可以更换图片
        //首先获得左右箭头事件。注意，当box1的left值为0时，左箭头的事件应该取消。box1的left值为3*600时，右箭头的事件应该取消
        var left = document.querySelector('.left')
        var right = document.querySelector('.right')
        var box1 = document.querySelector('.box1')
            //给箭头注册事件
        left.addEventListener('click', fn)


        function fn() {
            //left点击时，box1盒子往左边移动。left为负。添加动画，让left值从0，慢慢变为-600;在开始的left值基础上-600
            var timer = setInterval(animate, 10)
            var c = box1.offsetLeft
            console.log(c)

            function animate() {
                //首先获得开始的ldeft值
                var d = box1.offsetLeft


                if (d == c - 600) {
                    clearInterval(timer)
                }
                if (d == c - 1200) {
                    //清除left事件
                    left.removeEventListener('click', fn)
                    right.addEventListener('click', rfn)
                } else {
                    box1.style.left = d - 2 + 'px'
                    console.log(d)
                    console.log(box1.offsetLeft)
                }
                //移动到什么时候清除定时器呢
                //当b<=0时，清除定时器

            }

        }
        right.addEventListener('click', rfn)

        function rfn() {
            var timer = setInterval(animate, 10)
            var a = box1.offsetLeft
            console.log(a)

            function animate() {
                //首先获得开始的ldeft值
                var b = box1.offsetLeft
                if (b == a + 600) {
                    clearInterval(timer)
                }
                if (b == a + 1200) {
                    //清除left事件
                    right.removeEventListener('click', rfn)
                    left.addEventListener('click', fn)
                } else {
                    box1.style.left = b + 2 + 'px'
                    console.log(b)
                    console.log(box1.offsetLeft)
                }
                //移动到什么时候清除定时器呢
                //当b<=0时，清除定时器


            }
        }
        //动画
    </script>
</body>

</html>

1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

2、点击右侧按钮一次，图片往左播放一张，以次类推，左侧按钮同理

3、图片播放的同时，下面小圆圈模块跟随一起变化

4、点击小圆圈，可以播放相应的图片

5、鼠标不经过轮播图，轮播图也会自动播放图片

6、鼠标经过，轮播图模块，自动播放停止

动态生成小圆圈

核心：小圆圈的个数要和图片张数一致

1、只要得到有多少张图（有多少个li）

2、利用循环动态生成小圆圈，放到ol里面

3、创建节点li

4、插入节点appendChild(li)

5、第一个小圆圈添加current类，就是默认第一张图显示

小圆圈的排他思想：

1、点击当前小圆圈，就添加current类

2、其余小圆圈就移除这个类

3、在生成小圆圈的同时，就直接绑定这个点击事件

点击小圆圈滚动图片：

1、核心：点击某个小圆圈，就让图片滚动，小圆圈的索引号乘以图片的宽度，作为ul移动的距离

怎么知道我点的是那个小圆圈：

设置一个自定义属性，点击的时候就获得该自定义属性的值

点击右侧按钮一次，就让图片滚动一张

1、声明一个变量num，点击一次，自增1，让这个变量乘以图片宽度，就是ul的滚动距离

2、图片的无缝滚动

把ul的第一个li复制一份，放到ul的最后面

当图片滚动到克隆的最后一张图片的时候，让ul快速的、不做动画的跳到最左侧，left=0

同时将num赋值为0；可以从新开始滚动图片

克隆第一张图片：

1、克隆ul第一个li clodeNode() 加ture 深克隆复制里面的子节点。flase浅克隆，不复制节点

2、添加到ul的最后，appendChild

点击右侧按钮，小圆圈变化

最简单的方法就是再声明一个nun变量，（而不是跟随num），每次点击按钮，nun自增一。注意右侧按钮也是这个变量，因此要声明全局变量

自动播放功能：

1、添加一个定时器

2、类似于点击右侧按钮

3、手动调用右侧按钮点击事件 arrowr.click( )

4、鼠标经过focus，停止定时器，离开就开启

还是后面的插件好

<!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>
    <style>
        img {
            width: 600px;
            height: 300px
        }
        
        .focus {
            position: relative;
            width: 600px;
            height: 300px;
            background-color: purple;
            padding-left: 0px;
            overflow: hidden;
        }
        /* 父盒子宽度比较小，而liimg里面加起来宽度很大，不能一行显示，就会竖着显示 */
        /* 解决：把ul的宽度设置的大一点 */
        
        .focus ul li {
            float: left;
            list-style: none;
        }
        
        .focus ul {
            width: 400%;
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 0px;
            padding: 0px
        }
        
        .arrow-l,
        .arrow-r {
            /* display: none; */
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 24px;
            text-decoration: none;
            z-index: 7;
            color: white;
            text-align: center;
            line-height: 24px;
        }
        
        .arrow-l {
            left: 0px;
        }
        
        .arrow-r {
            right: 0px
        }
        
        .circle {
            width: 90px;
            height: 40px;
            position: absolute;
            bottom: 0px;
            left: 245px;
            /* margin: 0px;
            padding: 0px; */
            z-index: 1;
            text-align: center;
            line-height: 40px;
        }
        
        .circle li {
            width: 30px;
            height: 30px;
            float: left;
            list-style: circle;
            color: white;
        }
        
        .circle .current {
            list-style: disc
        }
    </style>
    <script src="JS/animater.js"></script>
    <!-- 注意顺序 -->
    <script src="JS/index.js"></script>
</head>

<body>
    <div class="focus">
        <a href="javascript:;" class="arrow-l">←</a>
        <a href="javascript:;" class="arrow-r">→</a>
        <!-- 核心滚动区域 -->
        <!-- 要让所有图片排在一行显示，不要什么都用div解决 -->
        <ul>
            <li>
                <a href=""><img src="https://img0.baidu.com/it/u=3249059478,3438607495&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500" alt=""></a>
            </li>
            <li>
                <a href=""><img src="https://img2.baidu.com/it/u=282419407,1896681766&fm=26&fmt=auto" alt=""></a>
            </li>
            <li>
                <a href=""><img src="https://img0.baidu.com/it/u=3476682447,114963827&fm=26&fmt=auto" alt=""></a>
            </li>
        </ul>
        <ol class="circle">

        </ol>
    </div>
</body>

</html>

index.js

window.addEventListener('load', function() {
    //1、获取元素
    var arrowl = document.querySelector('.arrow-l')
    var arrowr = document.querySelector('.arrow-r')
    var focus = document.querySelector('.focus')
    var focuswidth = focus.offsetWidth
        //2、鼠标经过轮播图，左右箭头显示
    focus.addEventListener('mouseover', function() {
            arrowl.style.display = 'block'
            arrowr.style.display = 'block'
            clearInterval(timer)
            timer = null //清除定时器变量
        })
        //鼠标离开，就隐藏左右按钮
    focus.addEventListener('mouseout', function() {
        arrowl.style.display = 'none'
        arrowr.style.display = 'none'
        timer = setInterval(function() {
            //手动调用点击事件
            arrowr.click()
        }, 1000)
    })

    //3、动态生成小圆圈
    var ol = document.querySelector('.circle')
    var ul = focus.querySelector('ul') //只选focus下面的ul
        //得到li的个数
    for (var i = 0; i < ul.children.length; i++) {
        //创建li
        var li = document.createElement('li')
            //记录当前小圆圈的索引号，通过自定义属性
        li.setAttribute('index', i)
            //放入ol
        ol.appendChild(li)
            //4、小圆圈的排他思想
        li.addEventListener('click', function() {
            //把所有li清除current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = ''
            }
            //当前的li设置current类名
            this.className = 'current'
                //点击小圆圈，实现图片滑动的效果，此时用到animate动画函数（注意因为index.js依赖animate.js所以，animate.js要写道index.js上面
                //使用动画函数的前提，该元素必须有定位
                //注意是ul在移动，而不是li在移动
                //小圆圈的索引号乘以图片的宽度，作为ul移动的距离注意是负值
                //当点击了某个li，就拿到当前li的索引号
            var b = this.getAttribute('index')
                //当点击某个li，就要把li的索引号值给num
            num = parseInt(b) //注意要转换为数值型，因为num声明的是一个全局变量，所以可以这样赋值
            console.log(num) //关键在于小圆圈索引号
            animate(ul, -b * focuswidth)
        })
    }

    //把ol里面的第一个li设置为current类;默认第一张图选中
    ol.children[0].className = 'current'
        //5、点击右侧按钮一次，图片移动一张

    // var flag = 0 //变量一定是一个全局变量
    // arrowl.addEventListener('click', function() {
    //     flag++

    //     //如果点击箭头，没有效果可能是前面a的href没有改，因为是a链接，一点击就会刷新页面
    //     if (flag <= 2) {
    //         animate(ul, -flag * focuswidth)
    //             //修改小圆圈,排他
    //         for (var i = 0; i < ol.children.length; i++) {
    //             ol.children[i].className = ''
    //         }
    //         ol.children[flag].className = 'current'
    //     }
    //     if (flag == 3) {
    //         // flagr = 2
    //         //要实现无缝滚动
    //         flag = 0

    //         ul.style.left = 0 + 'px' //这样设置的话，会看到一个突然的跳变效果，最好是赋值一份显示。当在此点击就立马跳到第一张，这样就没有跳变的效果了
    //         for (var i = 0; i < ol.children.length; i++) {
    //             ol.children[i].className = ''
    //         }
    //         ol.children[0].className = 'current'
    //     }

    // })

    // arrowr.addEventListener('click', function() {
    //         flag = flag - 1
    //         console.log(flag)
    //         if (flag >= 0) {
    //             animate(ul, -flag * focuswidth)
    //                 //修改小圆圈,排他
    //             for (var i = 0; i < ol.children.length; i++) {
    //                 ol.children[i].className = ''
    //             }
    //             ol.children[flag].className = 'current'
    //         }
    //         if (flag < 0) {
    //             flag = 2
    //             console.log(flag)
    //             ul.style.left = -2 * focuswidth + 'px'
    //             for (var i = 0; i < ol.children.length; i++) {
    //                 ol.children[i].className = ''
    //             }
    //             ol.children[2].className = 'current'
    //         }
    //     }
    // )

    var nun = 0 //控制小圆圈的变化 直接换成num，这样就能实现小圆圈、箭头点击次数的联系
        //克隆第一张图片，放到ul最后面
    var frist = ul.children[0].cloneNode(true)
        //复制到ul最后
    ul.appendChild(frist) //这个克隆是写在了生成小圆圈的下面，所以克隆一份并不会影响小圆圈的数量
    var flag = true
    arrowr.addEventListener('click', function() {
            if (flag) {
                flag = false //关闭节流阀
                num = num + 1

                console.log(num)
                    //如果走到了最后复制的图片，ul要快速设置为0
                if (num <= 3) {
                    animate(ul, -num * focuswidth, function() {
                        flag = true //动画执行完毕，打开节流阀
                    })
                    nun++
                    //先清除全部的current的类名

                }
                if (num <= 2) {

                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    }
                    //设置当前的类名
                    ol.children[num].className = 'current'
                }
                if (num == 3 || num == 4) {

                    //克隆图片,并滚动,//会不会多创建一个小圆圈
                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = ''
                    }
                    //设置当前的类名
                    ol.children[0].className = 'current'
                }
                //4就是图片的个数-1
                if (num == ul.children.length) {
                    flag = true
                        //快速设置left=0；回到第一张
                    ul.style.left = 0 + 'px'
                    num = 0
                        // for (var i = 0; i < ol.children.length; i++) {
                        //     ol.children[i].className = ''
                        // }
                        // //设置当前的类名
                        // ol.children[0].className = 'current'
                }
            }

        })
        //左侧按钮
    var num = 0
    arrowl.addEventListener('click', function() {
        if (flag) {
            flag = false
            num = num - 1

            console.log(num)
                //如果走到了最后复制的图片，ul要快速设置为0
            if (num == -1) {
                ul.style.left = -(ul.children.length - 1) * focuswidth + 'px'
                num = ul.children.length - 1
            }
            if (num >= 0) {

                animate(ul, -num * focuswidth, function() {
                    flag = true
                })

                //先清除全部的current的类名

            }
            if (num <= 2) {
                console.log(num)

                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ''
                }
                //设置当前的类名
                ol.children[num].className = 'current'
            }
        }
    })

    //自动播放功能,定时器
    var timer = setInterval(function() {
        //手动调用点击事件
        arrowr.click()
    }, 1000)


})

animater.js

function animate(obj, target, callback) {
    clearInterval(obj.timer) //先把原先地定时器清除之后，再开启另外一个新地定时器
    obj.timer = setInterval(fn, [15])

    function fn() {
        var a = obj.offsetLeft //不能换成div.style.left 不然会只移动一次。注意读取位置永offset，修改永style
        var step = (target - a) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step) //将结果赋值回去
            //把步长值改为整数，不要出现小数的情况
        if (a == target) {

            //取消定时器
            clearInterval(obj.timer)
                //执行回调函数 函数名+()回调函数写到定时器结束里面
                //首先判断没有有这个回调函数
            if (callback) {
                callback()
            }

        }

        obj.style.left = a + step + 'px'

    }
}

function callback() {
    img.src = '10-右.png'
    img.style.width = '50%'
}

function callback1() {
    img.src = '9-左.png'
    img.style.width = '50%'
}