纯 CSS 实现图片轮播图 - 简单易懂的代码示例

<div class='zl'>
        <ul>
            <li><a href='#'><img src='../img/11.img.jpg' class='ww1' alt='图片'></a></li>
            <li><a href='#'><img src='../img/22.img.jpg' class='ww2' alt='图片'></a></li>
            <li><a href='#'><img src='../img/33.img.jpg' class='ww3' alt='图片'></a></li>
            <li><a href='#'><img src='../img/44.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/55.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/56.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/57.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/58.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/59.img.jpg' class='ww4' alt='图片'></a></li>
            <li><a href='#'><img src='../img/50.img.jpg' class='ww4' alt='图片'></a></li>
<pre><code>    &lt;/ul&gt;
    &lt;ol class='zx'&gt;&lt;/ol&gt;
    &lt;a href='#' class='ss'&gt;&amp;lt;&lt;/a&gt;
    &lt;a href='#' class='xx'&gt;&amp;gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
.zl{
    width: 350px;
    height: 600px;
    /* background: #f00; */
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
.zl ul{
    width: 10000px;
    height: 600px;
    position: absolute;
    transition: 0.5s;
    /* border: 1px solid #f00; */
}
.zl li{
    width: 350px;
    height: 600px;
    float: left;
}
img{
    width: 100%;
    height: 100%;
}
.zx{
    /* width: 50%; */
    height: 25px;
    background: gold;
    opacity: 0.3;
    position: absolute;
    left: 10%;
    bottom: 20px;
    border-radius: 15px;
    /* margin: auto;
    text-align: center; */
}
.zx li{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: aliceblue;
    margin: 5px;
    cursor: pointer;
    /* line-height: 15px; */
}
.zx li:hover{
    background: #f00;
}
.zx .on{
    background-color: #f00;
}
.ss{
    display: none;
    color: greenyellow;
    /* display: block; */
    width: 35px;
    height: 100px;
    line-height: 100px;
    background: rgba(0,0,0,.3);
    font-size: 35px;
    position: absolute;
    left: 0;
    top: 250px;
}
.xx{
    display: none;
    color: greenyellow;
    /* display: block; */
    width: 35px;
    height: 100px;
    line-height: 100px;
    background: rgba(0,0,0,.3);
    font-size: 35px;
    position: absolute;
    right: 0;
    top: 250px;
}
.zl:hover .ss{
    display: block;
}
.zl:hover .xx{
    display: block;
}
.zl a:hover {
    color: #fff;
    background: rgba(0,0,0,.5);
}
</style>
<script>
    window.addEventListener('load',function(){
    var ss = document.querySelector('.ss');
    var zl = document.querySelector('.zl');
    var xx = document.querySelector('.xx');
    
    var ul = zl.querySelector('ul');
    var ol = zl.querySelector('.zx');
    
    // 动态生成圆点
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'on';
            var index = this.getAttribute('index');
            num = index;
            i = num;
            var dd = 350;
            ul.style.left = -index * dd + 'px';
        })
    }

    // 设置第一个圆点为选中状态
    ol.children[0].className = 'on';
    var num = 0;
    var oo = 0;
    var dd = 350;
    
    xx.addEventListener('click', function() {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = -1;
        };
        num++;
        ul.style.left = -num * dd + 'px';
        oo++;
        if (oo == ol.children.length){
            oo = 0;
        }
        for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[oo].className = 'on';
    });

    ss.addEventListener('click', function() {
        if (num < 1) {
            ul.style.left = -350 * (ul.children.length - 1) + 'px';
            num = ul.children.length;
        };
        num--;
        ul.style.left = -num * dd + 'px';
        oo--;
        if (oo < 0){
            oo = ol.children.length - 1;
        }
        for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[oo].className = 'on';
    });
});
</script>