首页 > 其他分享> > JS练习_轮播图

JS练习_轮播图

2021-09-20 11:02:06 作者：互联网

思路：
思路：
* 1、设定一个imagesSrcList集合，存放图片存储路径
* 2、通过DOM获取img标签
* 3、通过DOM获取所有button按钮标签
* 4、循环遍历btns，设置onclick点击事件函数，更换图片路径
源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作轮播图</title>
    <style>
        img{
            width: 700px;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    <img src="images/桌面壁纸1.jpg" alt="">
</div>
<button>1</button>
<button>2</button>
<button>3</button>
<script>
    /*思路：
    * 1、设定一个imagesSrcList集合，存放图片存储路径
    * 2、通过DOM获取img标签
    * 3、通过DOM获取所有button按钮标签
    * 4、循环遍历btns，设置onclick点击事件函数，更换图片路径*/

    let img = document.querySelector("img");
    let imagesSrcList =
        ["images/桌面壁纸1.jpg",
            "images/桌面壁纸2.jpg",
            "images/桌面壁纸3.jpg"];
    let btns = document.querySelectorAll("button");
    for (let i in btns) {
        btns[i].onclick = function (){
            // console.log(imagesSrcList[i]);
            img.src = imagesSrcList[i];
        }
    }
/*    btn.onclick = function (){
        for (let i = 0;i<imagesSrcList.length;i++){
        }
    }*/
</script>
</body>
</html>

标签：轮播,img,DOM,练习,imagesSrcList,JS,let,onclick,btns
来源： https://www.cnblogs.com/zhuhukang/p/15313886.html