纯 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>
<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');
    
    console.log(ul.children.length);
    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;
            ol = num;
            var dd = 350;
            ul.style.left = -index * dd + 'px';
        })
    }
    console.log(i);
    ol.children[0].className = 'on';
    var num = 0;
    var oo = 0;
    var dd = 350;
    
    xx.addEventListener('click', function() {
        if (num == 9) {
            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 = -3150;
                num = 10;
            };
            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>