js-用onclick写的手动轮播图

原创已于 2022-03-12 08:39:53 修改 · 421 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #前端

于 2020-09-09 17:10:22 首次发布

小白日志专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript的onclick事件来创建一个手动轮播图效果。通过点击按钮，用户可以前后切换图片，实现简单易用的前端轮播展示。文章涵盖了DOM操作、事件处理及动画效果的实现细节。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }

        /* .btn3 {
            background-color: orange;
        } */
        ul {
            position: absolute;
            left: 50%;
            bottom: 20%;
            display: flex;
            justify-content: space-between;
        }

        li {
            list-style: none;
            margin-left: 10px;
            border: 1px solid #333333;
            border-radius: 50%;
            width: 20px;
            height: 20px;

        }

        .sty {
            background-color: orangered;
        }
    </style>
</head>

<body>
    
    <ul>
        <li class="sty" data-dizhi="images/01.jpg"></li>
        <li class="sty" data-dizhi="images/02.jpg"></li>
        <li class="sty" data-dizhi="images/03.jpg"></li>
        <li class="sty" data-dizhi="images/04.jpg"></li>
        <li class="sty" data-dizhi="images/05.jpg"></li>
    </ul>
    <img src="images/01.jpg" alt="" id="img">
    <script>
        //点击不同的按钮 切换对应的图片
        var btns = document.getElementsByTagName("li");
		
        var img = document.getElementById("img");
			//首先获取对象
        for (var i = 0; i < btns.length; i++) {
			//然后遍历 每个对象都有承接
            var everyBtn = btns[i];


            everyBtn.onclick = function () {
			//放置点击事件
                img.src = this.dataset.dizhi;  //“dataset.dizhi”这个是自定义属性承接 每点击一次 换个图片地址的意思

                for (var j = 0; j < btns.length; j++) {

					//在遍历一次，用于改变轮播圆点的背景色
                    var singleBtn = btns[j];
                    singleBtn.classList.remove("sty");
                   //先把背景色去掉 包括自己本身的

                }
                this.classList.add("sty");
               //再把背景样式给添加上
            }

        }

     


    
    </script>
</body>

</html>