JavaScript 轮播图代码示例 - 简单易懂的轮播效果实现

<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');
    
    // 检查ul元素是否被正确选择到，并是否有子元素
    if (ul && ul.children.length > 0) {
        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';
        });
    } else {
        // 如果ul元素未找到或没有子元素，打印错误信息
        console.error('未找到ul元素或ul元素没有子元素。');
    }
});
</script>