CSS3自动轮播图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36060786/article/details/79761814

本文介绍了一种使用CSS3动画实现的自动轮播图方法。该方案仅需设置图片的基本参数，即可自动播放，适合小规模项目使用。虽然存在无法手动切换等局限性，但在性能方面表现出色。

之前写过两个懒人轮播，为啥叫懒人轮播呢？因为从轮播图的创建到开始轮播然后切换都是自动完成的，需要做的只是给它指定个位置，向对象init函数中传入些参数（图片长度，宽度，图片数量）即可。有点全自动洗衣机的即视感，不过这样做有一个缺点，就是dom操作太多，影响了性能。这次不一样了，用animation动画简单实现了个自动轮播，超级轻便呢（前提条件是已知图片张数，但图片路径未知，就是说可以通过更改图片路径从而更新页面图片），只是缺点更多了：

①不能切换，因为动画一直在运行，若设置动画暂停就一切都停止了。

②轮播一张图片之间的间隔无法控制。

③修改图片宽高需要修改动画帧移动参数@keyframes。

不过用animation实现一些小型的轮播还是非常棒的，性能极佳。顺便贴下代码和思路：

js代码：

var demo = (function(document,window) {
    // 获取所需元素
    var ele = {
        // 轮播所在容器
        oWrapper: document.querySelector(".wrapper"),
        // 轮播ul
        oUl: document.querySelector(".wrapper-ul"),
        // 轮播li
        aLi: document.querySelectorAll(".wrapper-ul li"),
        // 所有图片img标签
        aImg: document.querySelectorAll(".wrapper-ul li img"),
    }
    // 设置轮播wrapper,ul宽高并把图片资源放入li中
    function setPlaying(wid,hei,num,imgs) {
        ele.oWrapper.style.width = wid + "px";
        ele.oWrapper.style.height = hei + "px";
        ele.oUl.style.width = wid*num + "px";
        ele.oUl.style.height = hei + "px";
        ele.aLi.forEach(function(value,index,arr) {
            value.style.width = wid + "px";
            value.style.height = hei + "px";
        })
        // 设置图片属性
        ele.aImg.forEach(function(value,index,arr) {
            value.src = imgs[index].url;
            value.alt = imgs[index].alt;
            value.style.width = wid + "px";
            value.style.height = hei + "px";
        })
    }
    var run = {
        // 默认图片宽度
        imgW: 500,
        // 默认图片高度
        imgH: 500,
        // 保存图片资源
        imgs: [],
        num: ele.aLi.length,
        init: function(config) {
            this.imgW = config.imgW||this.imgW;
            this.imgH = config.imgH||this.imgH;
            this.imgs = config.imgs;
            //设置wrapper,ul,li宽高
            setPlaying(this.imgW,this.imgH,this.num,this.imgs);
        }
    }
    return run;
})(document,window);

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="lunbo.css">
    <title>css3实现轮播</title>
</head>
<body>
    <div id= "container">
           <ul class="wrapper-ul">
                <li><img src="" alt="" width="" height=""></li>
                <li><img src="" alt="" width="" height=""></li>
                <li><img src="" alt="" width="" height=""></li>
                <li><img src="" alt="" width="" height=""></li>
                <li><img src="" alt="" width="" height=""></li>
            </ul>
        </div>
    </div>   
    <script src="lunbo.js"></script>
    <script>
        demo.init({
            imgW: 400,
            imgH: 200,
            imgs:[
                {
                    url: "imgs/one.jpg",
                    alt: "one",
                    width: "300px",
                    height: "180px"
                },
                {
                    url: "imgs/two.jpg",
                    alt: "two",
                    width: "300px",
                    height: "180px"
                },
                {
                    url: "imgs/three.jpg",
                    alt: "three",
                    width: "300px",
                    height: "180px"
                },
                {
                    url: "imgs/four.jpg",
                    alt: "four",
                    width: "300px",
                    height: "180px"
                },
                {
                    url: "imgs/five.jpg",
                    alt: "five",
                    width: "300px",
                    height: "180px"
                }
            ]
        })
    </script>
</body>
</html

css代码：

@charset "utf-8";
/* 样式初始化 */
html,body {
    width: 100%;
    height: 100%;
}
body ,ul {
    margin: 0;
}
ul {
    padding: 0;
}
ul {
    list-style: none;
}
/* container-start */
body {
    background-color:rgb(1,1,21);
}
#container {
    width: 100%;
    height: 100%;
}
.wrapper {
    position: relative;
    overflow: hidden;
    margin: 100px auto;
    cursor: pointer;
}
.wrapper-ul {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
    animation: play 12s infinite;
}
.wrapper-ul li {
    display: inline-block;
}
/*轮播动画  */
@keyframes play {
    0% {
        transform: translate(0px);
    }
    20% {
        transform: translate(-400px);
    }
    40% {
        transform: translate(-800px);
    }
    60% {
        transform: translate(-1200px);
    }
    80% {
        transform: translate(-1600px);
    }
    100% {
        transform: translate(0px);
    }
}

跟轮播杠上了，这次很轻便