轮播图-渐隐渐现版

最新推荐文章于 2022-09-19 17:47:45 发布

betterangela

最新推荐文章于 2022-09-19 17:47:45 发布

阅读量381

点赞数

文章标签：动画 css css3

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

版权

轮播图-渐隐渐现版

导语

插件封装：

量级有点太大了，很多功能是用不上的。

节省代码量，自己拿js封装轮播

能够用css不用js

多参数如何处理

扩展性且功能强大

实现思路&结构样式

css方敏：

position:absolute之后宽度是内容撑开的，而不是100%的

定位之后不设置默认是z-index为0

让盒子水平排列的几种方法，各自优缺点

float, display:inline-block, display:flex

回调函数

定义：把一个函数作为实参传给另外一个方法，再另外一个方法执行到某个阶段的时候，把传进来的这个函数执行。

平常用到的场景：

arr.forEach(() => { ...... })

把一个函数作为值传给forEach。每循环数组中的一项，就把这个函数执行

replace：捕获到一项，就把传过去的回调执行一次

回调的应用：

在某个函数执行到了某个阶段，需要去做其他事情。其他事情作为回调函数

数据绑定和自动轮播

transitionend特点：

当transition动画结束后，触发事件

有几个样式属性改变，就会触发几次

真实项目中实现动画：

一般使用css3动画，控制transition样式，设置transitionend事件监听；

swiper动画基于transition来实现

<!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: 1226px;
            height: 460px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .wrapper{
            position: relative;
            height: 100%;
        }
        .wrapper .slider{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            opacity: 0;
            transition: all 0.8s ease 0s;
        }
        .wrapper .slider:nth-child(1){
            z-index: 1;
            opacity: 1;
        }
        .slider img{
            width: 100%;
            height: 100%;
        }
        .pagination {
            position: absolute;
            bottom: 20px;
            height: 20px;
            padding: 5px;
            right: 30px;
            z-index: 999;
            font-size: 0;
        }
        .pagination span{
            box-sizing: content-box;
            cursor: pointer;
            display: inline-block;
            width: 6px;
            height: 6px;
            background: rgba(0,0,0,.4);
            border: 2px solid #fff;
            border-color: rgba(255,255,255,.3);
            border-radius: 50%;
            z-index: 999;
            float: left;
            margin: 0 4px;
        }
        .pagination span.active{
            background: rgba(255,255,255,.3);
            border-color: rgba(0,0,0,.4);
        }
        .button-pre,.button-next{
            width: 41px;
            height: 69px;
            position: absolute;
            top: 50%;
            cursor: pointer;
            transform: translateY(-50%);
            z-index: 999;
            background-image: url("../img/icon-slides.png");
        }
        .button-pre{
            left: 0;
            background-position: -84px 0;
        }
        .button-pre:hover{
            background-position: 0 0;
        }
        .button-next{
            right: 0;
            background-position: -125px 0;
        }
        .button-next:hover{
            background-position: -43px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrapper">
<!--            <div class="slider"><img src="../img/banner-mi-0.jpg" alt=""></div>-->
<!--            <div class="slider"><img src="../img/banner-mi-1.jpg" alt=""></div>-->
<!--            <div class="slider"><img src="../img/banner-mi-2.jpg" alt=""></div>-->
<!--            <div class="slider"><img src="../img/banner-mi-3.jpg" alt=""></div>-->
        </div>
        <!--宽度和高度让里面的li撑开，定位之后为内容的宽高-->
        <ul class="pagination">
<!--            <span class="active"></span>-->
<!--            <span></span>-->
<!--            <span></span>-->
<!--            <span></span>-->
        </ul>
        <div class="button-pre">
        </div>
        <div class="button-next">
        </div>

    </div>
    <script>
        let timer=null,carouselItems=[];
        let $container=$('.container'),$wrapper=$container.find('.wrapper'),$pagination=$container.find('.pagination'),$slideList=null,$paginationList=null;
        let step=0,interval=3000;
        let carousel=(function () {


            let fetch=function(callback){
               $.ajax({
                   url:'../json/banner.json',
                   method:'get',
                   success:function (res) {
                       callback && callback(res);
                   }
               })
            }
            let paint=function (data) {
                console.log(data);
                carouselItems=data;
                let wrapper='',pagination='';
                data.forEach((item)=>{
                    wrapper+=`<div class="slider"><img src="${item.url}" alt=""></div>`;
                    pagination+='<span></span>';
                })
                $wrapper.html(wrapper);
                $pagination.html(pagination);
                $pagination.children('span:first-child').addClass('active');
                // 赋值
                $slideList=$wrapper.children('.slider');
                $paginationList=$pagination.children('span');
            }
            let autoPlay=function () {
                step++;
                if(step>=carouselItems.length){
                    step=0;
                }
                $slideList.each((index,item)=>{
                    $(item).css({
                        zIndex:0,
                        opacity:0,
                    })
                    if(step===index){
                        $(item).css({
                            zIndex:1,
                            opacity:1,
                        })
                    }
                })
                $paginationList.each((index,item)=>{
                    $(item).removeClass('active')
                    if(step===index){
                        $(item).addClass('active')
                    }
                })

            }


            return {
                init:function () {
                   fetch(function (data) {
                       paint(data);
                       timer=window.setInterval(autoPlay,interval);
                   });
               }
            }
        })()
        carousel.init();
    </script>
</body>
</html>