jQuery 实现轮播图效果

最新推荐文章于 2024-08-27 19:30:26 发布

ZD_SUMMER

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量533

点赞数

分类专栏： jQuery 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/weixin_52378257/article/details/120589136

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery 实现轮播图效果

html部分

	<!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>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
</head>

<body>
    <div class="container">
        <div class="content">
            <div class="paper">
                <ul class="list list-1">
                
                    <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>
            </div>
            <div class="prev"></div>
                <div class="next"></div>
                <div class="circle">
                    <ul>
                        <li class="active" ></li>
                        <li ></li>
                        <li ></li>
                        <li ></li>
                    </ul>
                </div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

</html>

css部分

*{
    margin: 0;
    padding: 0;
}


ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container{
    width: 100%;
    .content{
        margin: auto;
        width: 800px;
        height: 450px;
        position: relative;
        overflow: hidden;
        .paper{
            width: 4800px;
            position: absolute;
            left: -800px;
            top: 0;
            .list{
                display: flex;
                height: 450px;
                img{
                    width: 800px;
                    height: 450px;
                }
            }
           
        }
        .next,.prev{
            width: 50px;
            height: 80px;
            background-color: rebeccapurple;
            position: absolute;
            top: 50%;
        
            transform: translateY(-50%);
        }
        .next{
            right: 0;
        }

        .circle{
            ul{
                display: flex;
                li{
                    width: 20px;
                    height: 20px;
                    background-color: red;
                    border-radius: 50%;
                    margin: 5px;
                }
                .active{
                    background-color: saddlebrown;
                }
            }
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform:translateX(-50%);
        }
    }
}

js部分

$(function () {
    function autopaly() {
        //控制移动的距离
        let index = 1;
        //图片的宽度
        let imgWidth = $('img').width()
        let time = 2500;
        //存放定时器
        let timer = null
        //存放高亮的小圆点下标
        let circleIndex = 0
        //存放上次点击图片移动的时间戳
        let firstTime = 0
        //存放当前点击的时间戳
        let curentTime = 0
        return function () {
            //将第一张img复制插入到最后面，来实现无缝播放效果
            let img1 = $('.list').find('li').eq(0).clone()
            $('.list').append(img1)
            //将最后一张img复制插入到最前面，来实现无缝播放效果
            let img2 = $('.list').find('li').eq($('.list').find('li').length - 2).clone()
            $('.list').prepend(img2)
            //图片总数
            let len = $('.list').eq(0).children().length


            //在每个小圆点上挂载一个对应的下标数据
            $('.circle').find('li').each((index,item)=>{
                $(item).data('action',index)
            })

            //开始自动轮播
            run(time)

            //鼠标移入轮播图中，自动轮播暂停
            $('.content').hover(function () {
                //清除当前的定时器
                clearInterval(timer)
            }, function () {
                //鼠标移出继续自动轮播
                run(time)
            })


            //切换到上一张
            $('.prev').on('click', function () {
                //利用时间戳实现节流避免点击切换过快
                curentTime = Date.now()
                if (curentTime - firstTime > 400) {
                    //如果图片移到了第一张
                    if (index <= 1) {
                        //重新赋值index
                        index = len - 2
                        //让外部容器移动到-(len - 1) * imgWidth位置（第一张与轮播图要轮播的最后一张张相同，并不会有视觉影响）
                        $('.paper').css('left', -(len - 1) * imgWidth)
                    } else {
                        //否则继续移动
                        index--
                    }
                    //图片对应小圆点的下标
                    circleIndex--
                    
                    circleRun()
                    //图片继续运动
                    $('.paper').animate({ 'left': -index * imgWidth }, 400)
                    //重新赋值时间戳
                    firstTime = curentTime
                }

            })

            //切换到下一张
            $('.next').on('click', function () {
                //利用时间戳实现节流避免点击切换过快
                curentTime = Date.now()
                if (curentTime - firstTime > 400) {
                    //当图片移到最后一张时
                    if (index >= len - 1) {
                        //重新复制index
                        index = 2
                        //让外部容器立即移动到-${imgWidth}的位置（最后一张与轮播图要轮播的第一张相同，并不会有视觉影响）
                        $('.paper').css('left', `-${imgWidth}px`)
                    } else {
                        index++
                    }
                    //图片继续运动
                    $('.paper').animate({ 'left': -index * imgWidth }, 400) 
                    circleIndex++
                    circleRun()
                    firstTime = curentTime
                }
            })

            //点击小圆点实现切换效果
            $('.circle').on('click', 'li', function () {
                //获取其身上挂载的下标数据
                circleIndex = +$(this).data('action')
                //如果图片刚好显示到最后一张
                if (index >= len - 1) {
                    //将整个容器瞬间显示到第二张图片(最后一张与轮播图要轮播的第一张相同，并不会有视觉影响)
                    $('.paper').css({ 'left': `-${imgWidth}px` })
                }
                //重新赋值index
                index = circleIndex + 1
                //移动容器实现点击滑动到对应的图片
                $('.paper').animate({ 'left': -index * imgWidth }, 400)
                //改变小圆点高亮
                circleRun()
            })

            //自动轮播函数
            function run(time) {
                //开启定时器
                timer = setInterval(() => {
                    //index++
                    index++;
                    //当index大于等于图片长度时
                    if (index >= len) {
                        //将index重新赋值为2
                        index = 2;
                        //停止后续动画
                        $('.paper').finish()
                        //将大移动的容器移动到第一张的位置
                        $('.paper').css('left', `-${imgWidth}px`)
                    }
                    //继续移动图片
                    $('.paper').animate({ 'left': -index * imgWidth }, 400)
                    //更换
                    circleIndex++
                    circleRun()
                }, time);
            }

            //小圆点与图片一一对应变色
            function circleRun() {
                circleIndex = circleIndex > $('.circle').find('ul').children().length - 1 ? 0 : circleIndex < 0 ? $('.circle').find('ul').children().length - 1 : circleIndex
                $('.circle').find('ul').children().eq(circleIndex).addClass('active').siblings().removeClass('active')
            }

        }
    }

    var run = autopaly();
    //调用函数开启动画
    run()
})