轮播图-左右运动版

betterangela

于 2022-08-28 14:16:57 发布

阅读量489

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/betterangela/article/details/126569428

版权

轮播图-左右运动版

**实现思路*很重要**

导语：

渐隐渐现左右运动的 3D版本的……

基础html结构：

.container

+固定一帧的宽高

+overflow:hidden

.wrapper

真实内容的盒子，也是真实运动的盒子

transform:xxx / left:xxx

transition:all 0.3s ease 0s;

.wrapper在.container中向左移动，每次移动一帧的宽度

重点

无缝衔接：

把第一张原封不动地克隆一份一模一样地放在末尾

第四张时，再往后走轮播到克隆的第一张；这个时候做一件事，从当前克隆的第一张立马啪蹦回到真实的第一张；从第一张立即蹦到第一张无动画，肉眼是无感知的；

原理：

克隆一份放在末尾；
当轮播到最后一帧的时候，继续往后走，此时出现在视窗中的是克隆出来的第一帧；当克隆的这个再往后走的时候，那这个时候，做一件事情，让.wrapper瞬间回滚到最初始的位置；这个瞬间蹦回无动画，所以肉眼是无感知的，这样就实现了无缝衔接；
之后依然继续正常地向后轮播，第二帧、第三帧……；

和视频中的做法稍有不同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container{
            width: 1200px;
            height: 240px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .wrapper{
            width: 10000px;
            height: 240px;
            display: flex;
            position: absolute;
            left: 0;
            /*transform: translateX(0);*/
            /*transition: all 0.3s;*/
        }
        .wrapper .slider{
            width: 1200px;
            height: 240px;
        }
        .slider img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="slider"><img src="../banner/banner-0.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-1.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-2.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-3.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-0.png" alt=""></div>
        </div>
    </div>
    <script>
        let frame=0;
        let $container=$('.container')undefined$wrapper=$container.children('.wrapper');
        let timer=null;
        timer=window.setInterval(()=>{
            frame++;
            $wrapper.animate({
                // animate不支持css3中的一些样式
                left:`${frame*-1200}px`undefined
            }undefined300undefined()=>{
                if(frame>3){
                    $wrapper.css({
                        left:`0`undefined
                    })
                    frame=0;
                }
            })
            // 这是用transfrom的做法
            // $wrapper.css({
            //     transform:`translateX(${frame*-1200}px)`
            // }undefined300)


        }undefined1000)
    </script>
</body>
</html>

UI完善：箭头、指示点

左右按钮实现左右切换，下方指示点快速定位到某一帧、运动的时候焦点对齐，鼠标悬浮暂停……

分页器样式

display:inline-block 也能让li在同一行，每个li和li之间空格和enter当做一个占位符，会产生间隙，让父元素font-size:0

雪碧图的用法，用background-position值，图片往左走postion为负数

**完整功能实现*重要**

封装思想：

要操作哪些功能：自动轮播，点击左右切换功能，焦点对齐及点击焦点切换……

要操作的元素：两个按钮，底部焦点，container，wrapper

主要是左按钮处理：

往左走边界判断：

若<0，从真实的第一张立马蹦到克隆的第一张，然后再运动到索引为3这个位置；

与轮播边界的区别：

轮播边界是克隆的那张再往后走的时候，等于边界是克隆的那一张；而左按钮是自身最左边的第一张；

代码：

这里还加一个防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .container{
            width: 1200px;
            height: 240px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .wrapper{
            width: 10000px;
            height: 240px;
            display: flex;
            position: absolute;
            left: 0;
            /*transform: translateX(0);*/
            /*transition: all 0.3s;*/
        }
        .wrapper .slider{
            width: 1200px;
            height: 240px;
        }
        .slider img{
            width: 100%;
            height: 100%;
        }
        .pagination {
            position: absolute;
            bottom: 10px;
            height: 20px;
            padding: 5px;
            left: 50%;
            transform: translateX(-50%);
        }
        .pagination li{
            cursor: pointer;
            width: 10px;
            height: 10px;
            background: #fff;
            opacity: 0.5;
            border-radius: 5px;
            z-index: 999;
            float: left;
            list-style: none;
            margin-right: 10px;
        }
        .pagination li.active{
            opacity: 1;
        }
        .arrow{
            opacity: 0.3;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50%;
            cursor: pointer;
            transform: translateY(-50%);
        }
        .left{
            left: 0;
            transform: rotate(180deg) translateY(50%);
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <div class="slider"><img src="../banner/banner-0.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-1.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-2.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-3.png" alt=""></div>
            <div class="slider"><img src="../banner/banner-0.png" alt=""></div>
        </div>
        <!--宽度和高度让里面的li撑开，定位之后为内容的宽高-->
        <ul class="pagination">
            <li data-frame="0" class="active"></li>
            <li data-frame="1"></li>
            <li data-frame="2"></li>
            <li data-frame="3"></li>
        </ul>
        <div class="arrow right" onclick="next('right')">
            <img src="../img/right.jpeg" alt="" width="30" height="30">
        </div>
        <div class="arrow left" onclick="turnLeft()">
            <img src="../img/right.jpeg" alt="" width="30" height="30">
        </div>
    </div>
    <script>
        let carouselModule=(function () {
            let frame=0;
            let $container=$('.container')undefined$wrapper=$container.children('.wrapper')undefined$dotList=$('ul.pagination li')undefined$arrowRight=$('.arrow.right')undefined$arrowLeft=$('.arrow.left');
            let timer=null;
            let interval=3000;
            function turnLeft() {
                frame--;
                if(frame<0){
                    $wrapper.css({
                        left:`${4*-1200}px`undefined
                    })
                    frame=3;
                }
                $wrapper.animate({
                    left:`${frame*-1200}px`undefined
                }undefined300)
                setDotted()
            }
            function handlePagination() {
                // 循环绑定事件
                $dotList.each((indexundefinedli)=>{
                    $(li).on('click'undefinedfunction () {
                        frame=Number($(this).index());
                        $wrapper.animate({
                            left:`${frame*-1200}px`undefined
                        }undefined300)
                        setDotted()
                    })
                })
            }
            function setDotted(){
                // 设置指示点
                let index=frame+1;
                index>4?index=1:null
                $(`ul.pagination li`).removeClass('active')
                $(`ul.pagination li:nth-child(${index})`).addClass('active')
            }
            function autoPlay() {
                frame++;
                if(frame>=5){
                    // 克隆的那一张再往后走的时候，再瞬间蹦回
                    $wrapper.css({
                        left:`0px`undefined
                    })
                    frame=1;
                }
                $wrapper.animate({
                    left:`${frame*-1200}px`undefined
                }undefined300)
                setDotted()
            }




            return{
                init(){
                    timer=window.setInterval(autoPlayundefinedinterval)
                    // pagination绑事件
                    handlePagination()
                    $arrowRight.click(autoPlay)
                    $arrowLeft.click(turnLeft)
                    $container.on('mouseenter'undefined()=>window.clearInterval(timer))
                        .on('mouseleave'undefined()=>timer=window.setInterval(autoPlayundefinedinterval))
                }
            }
        })();


        carouselModule.init()
    </script>
</body>
</html>

基于swiper

现成的插件，或者是自己封装好的

Swiper使用方法 - Swiper中文网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .swiper-container{
            width: 1200px;
            height: 240px;
        }
        .swiper-container img{
            width: 1200px;
            height: 240px;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../banner/banner-0.png" alt=""></div>
            <div class="swiper-slide"><img src="../banner/banner-1.png" alt=""></div>
            <div class="swiper-slide"><img src="../banner/banner-2.png" alt=""></div>
            <div class="swiper-slide"><img src="../banner/banner-3.png" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <script src="../js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container'undefined {
            // autoplay: trueundefined//可选选项，自动滑动
            loop:trueundefined
            autoplay: {
                disableOnInteraction: falseundefined
            }undefined
            pagination: {
                el: '.swiper-pagination'undefined
                clickable :trueundefined
            }undefined
            navigation: {
                nextEl: '.swiper-button-next'undefined
                prevEl: '.swiper-button-prev'undefined
            }undefined
        })
    </script>
</body>
</html>