原生JS轮播

最新推荐文章于 2023-05-22 19:10:49 发布

萌新+1

最新推荐文章于 2023-05-22 19:10:49 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/qq_43288882/article/details/90246608

版权

轮播图

记录一下哈！！！




 <body>
            <div id="view">
                <!-- 图片 -->
                <div id="imgs">
                    <img src="images/a.jpg" alt="">
                    <img src="images/b.jpg" alt="">
                    <img src="images/c.jpg" alt="">
                    <img src="images/d.jpg" alt="">
                </div>
                <!-- 左右按钮 -->
                <div id="prev">&lt;</div>
                <div id="next">&gt;</div>
                <!-- 小方块 -->
                <ul id="btn">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </body>
        <script>
            var imgs = document.getElementById('imgs').getElementsByTagName('img');
            var btn = document.getElementById('btn');
            var btns = btn.getElementsByTagName('li')
           //记录初始值
            var count = 0;
            // 左标签
            prev.onclick = function () {
            //点击事件  设置标签样式
                imgs[count].style.display = 'none';
                count--;
                if (count < 0) {
                    count = imgs.length - 1
                }
                imgs[count].style.display = 'block';
            }
            // 右标签
            next.onclick = function () {
                imgs[count].style.display = 'none';
                count++;
                if (count > imgs.length - 1) {
                    count = 0
                }
                imgs[count].style.display = 'block';
            }
        
            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i
                btns[i].onclick = function () {
                    imgs[count].style.display = 'none';
                    count = this.index;
                    imgs[count].style.display = 'block';
                }
        
            }
        </script>