轮播图demo左右滑动-pc端

最新推荐文章于 2022-09-21 16:47:47 发布

QUAN-铨

最新推荐文章于 2022-09-21 16:47:47 发布

阅读量549

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/abcquan123/article/details/108282254

版权

js 专栏收录该内容

20 篇文章

订阅专栏

轮播图demo左右滑动-pc端

这里使用的是自己封装的动画，最完整，但是有点繁琐，还实现了节流的功能

外面只引入了四张图片的地址

在这里插入图片描述

有注释，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图demo左右滑动-pc端</title>
    <style>
        /* 轮播图 */
        /* 去掉默认样式 */
        li,i,ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .swiper{
            margin: 100px auto;
            overflow: hidden;
            width: 1226px;
            height: 460px;
            position: relative;
        }
        .swiper ul{
            position: absolute;
            top: 0;
            left: 0;
            height: 460px;
            width: 500%;
        }
        .swiper ul li{
            width: 1226px;
            height: 460px;
            float: left;
        }
        .swiper img{
            display: block;
            width: 100%;
            height: 100%;
        }
        /* 左右按钮 */
        .swiper span{
            font-size: 25px;
            display: block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #ccc;
            margin-top: -25px;
            position: absolute;
            top: 50%;
            /* 先隐藏，在鼠标进入轮播图区域的时候显示 */
            display: none;
            cursor: pointer;
        }
        .swiper .button-right{
            right: 0;
        }
        .swiper .button-left{
            left: 0;
        }
        .swiper span:hover{
            background-color: #e0e0e0;
            color: black;
        }
        /* 小圆圈 */
        .bullets{
            position: absolute;
            bottom: 30px;
            right: 60px;
            width: 300px;
            height: 20px;
            text-align: right;
        }
        .bullets i{
            display: inline-block;
            height: 10px;
            width: 10px;
            border: 3px solid #cccccc;
            background-color: #e0e0e0;
            border-radius: 50%;
            margin: 0 3px;
        }
        .bullets .active{
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="swiper">
        <!-- 轮播的图片 -->
        <ul></ul>
        <!-- 左右按钮 -->
        <span class="button-left">&lt;</span>
        <span class="button-right">&gt;</span>
        <!-- 小圆圈 -->
        <div class="bullets"></div>
    </div>
    <script>
        // 定义一些中间值
        let num=0//记录图片滚动,滚动一次就+1,或者点击小圈变到相应的index
        let circle=0//记录小圈变化,滚动一次就+1,或者点击变到相应的index
        let flag=true//节流阀

        // 获取元素
        let swiper=document.querySelector('.swiper')
        let ul=document.querySelector('.swiper ul')
        let bullets=document.querySelector('.bullets')
        let button_left=document.querySelector('.button-left')
        let button_right=document.querySelector('.button-right')

        // 动态添加图片和小圈
        let arr=['./img/main-back-1.jpg','./img/main-back-2.jpg','./img/main-back-3.jpg','./img/main-back-4.jpg']
        let html=''
        for(let i=0;i<arr.length;i++){
            html+='<li><a><img src='+arr[i]+'></img></a></li>'
            // 这里生成小圈
            let ii=document.createElement('i')
            ii.setAttribute('index',i)
            bullets.appendChild(ii)
        }
        ul.innerHTML=html

        // 克隆第一张图片放到最后这是为了实现无缝滚动效果
        let last_li=ul.children[0].cloneNode(true)
        ul.appendChild(last_li)
        // 默认第一个小圈是active
        bullets.children[0].className='active'


        // 控制左右按钮的显示与隐藏
        swiper.addEventListener('mouseenter',function(){
            button_left.style.display="block"
            button_right.style.display="block"
            // 鼠标进入的时候，不轮播
            clearInterval(timer)
            timer=null
        })
        swiper.addEventListener('mouseleave',function(){
            button_left.style.display="none"
            button_right.style.display="none"
            // 出去的时候继续轮播
            timer=setInterval(function(){
                button_right.click()
            },2000)
        })

        // 点击右边按钮
        button_right.addEventListener('click',function(){
            //上一个动画未执行完成，不能执行下一个
            if(flag){
                flag=false
                // 如果到了最后一张图片，就立马回到一开始的第一张，这两张图片一样
                if(num==ul.children.length-1){
                    num=0
                    ul.style.left=0
                }
                num++
                quan_animate(ul,-num*swiper.offsetWidth,function(){flag=true})
                // 小圈改变
                circle++
                if(circle==bullets.children.length) circle=0
                circleChange()
            }
        })

        // 点击右边的按钮
        button_left.addEventListener('click',function(){
            // 和右移差不多
            if(flag){
                flag=false
                if(num==0){
                    num=ul.children.length-1
                    ul.style.left=-num*swiper.offsetWidth+'px'
                }
                num--
                quan_animate(ul,-num*swiper.offsetWidth,function(){flag=true})
                // 小圈改变
                circle--
                if(circle<0) circle=bullets.children.length-1
                circleChange()
            }
        })

        // 点击小圈的时候也可以控制播放（这里可以在生成小圈的时候直接加监听，也可以在这里）
        for(let i=0;i<bullets.children.length;i++){
            bullets.children[i].addEventListener('click',function(){
                // 得到小圈的index
                circle=this.getAttribute('index')
                // 调用下面定义好的函数
                circleChange()
                num=circle
                quan_animate(ul,-num*swiper.offsetWidth)
            })
        }

        // 小圈的改变
        function circleChange(){
            for(let i=0;i<bullets.children.length;i++){
                bullets.children[i].className=''
            }
            bullets.children[circle].className='active'
        }

        // 自动轮播
        let timer=setInterval(function(){
            button_right.click()
        },2000)

        // 因为很多次都用到移动的动画，这里直接封装一个动画
        function quan_animate(obj,target,callback){
            clearInterval(obj.timer)
            obj.timer=setInterval(function(){
                // 步长，越来越慢
                let step=(target-obj.offsetLeft)/10
                // 取整,不出现小数的情况，在step为正数时，向上取整（0.5变为1）在step为负数时，向下取整（0.5变为-1）这样才能保证他在小数时一直移动
                step=step>0?Math.ceil(step):Math.floor(step)
                // 相等了就清空定时器
                if(obj.offsetLeft==target){
                    clearInterval(obj.timer)
                    // 有回调函数就执行回调函数
                    callback&&callback()
                }
                // 移动
                obj.style.left=obj.offsetLeft+step+'px'
            },15)
        }
    </script>
</body>
</html>