原生js实现简易轮播图

最新推荐文章于 2024-04-27 09:07:55 发布

编程的牛牛

最新推荐文章于 2024-04-27 09:07:55 发布

阅读量231

点赞数 2

文章标签： html css js

本文链接：https://blog.csdn.net/qq_25994609/article/details/108937476

版权

这一次写了一个简易的轮播图，运用的逻辑是先写好样式，通过修改class的值来实现样式

实现的效果是每两秒图片进行轮播，点击按钮可以切换到下一张，继续每两秒进行轮播。

边代码边解释
1、HTML部分
设置三张图片，不给classname和id，设置三个input来表示图片下面的小圆点，也不给classname和id

<body>
<img   src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2779570103,872955341&fm=26&gp=0.jpg" alt="">
<img  src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2254997567,3945700522&fm=26&gp=0.jpg" alt="">
<img  src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2042820083,2341220856&fm=26&gp=0.jpg" alt="">
<input  type="radio" name="1">
<input  type="radio" name="1">
<input  type="radio" name="1">
<button id="aa">下一张</button>
</body>

2、CSS部分
先用css把图片隐藏，a、b、c是还没有应用上的样式，我们在js部分对上面没有给classname的图片和CheckBox设置classname

     img{
        display: none;
        }
        .a{
            display: block;
        }
        .b{
            display: block;
        }
        .c{
            display: block;
        }
        img {
            width: 300px;
            height: 200px;
        }

3、JS部分
1、在这里我们先获取到所有的图片和CheckBox以及下一张的按钮
2、我们包装一个方法，在事件里面设置一个信号量ww，每点击一次自增一次，当增加到3的时候，自动返回1
3、然后我们遍历CheckBox，当CheckBox的下标和信号量一致的时候，就设置CheckBox的状态为选中效果
4、接着遍历一遍图片，判断一下，如果当前CheckBox的下标被选中，并且CheckBox的下标和图片的下标一致时，给图片设置classname分别为a、b、c，刚好和我们前面设置的样式对应。样式就是设置图片显示。
5、接着我们可以设置一个计时器，每隔2秒调用一次方法
在给按键绑定一个按键事件，每点击一次调用一次方法。
注：要记得在点击按钮后清除清除清定时器，然后在运行定时器。

 var ww =0;
   var a = document.getElementsByTagName("img");
   var q = document.getElementsByTagName("input");
   var aa = document.getElementById("aa");
    var SetInterval;//声明一个变量设置计时器
    q[0].checked = true;//设置刚刚打开页面时第一个CheckBox被选中
    a[0].className = "a";//设置第一个图片显示
    function changee(){
        ww++;
        if (ww>=3){
            ww = 0
        }
        for (var i = 0; i <q.length ; i++) {//遍历CheckBox
            if (i == ww){
                q[i].checked = true;
            }
            for (let j = 0; j <a.length ; j++) {//遍历图片
                if (q[i].checked){//判断CheckBox是否处于被选中状态
                    if (i==j){//判断当CheckBox下标和图片下标一致时设置classname
                        if (i ==0){
                            a[j].className = "a";
                        }
                        if (i == 1){
                            a[j].className = "b";
                        }
                        if (i == 2){
                            a[j].className = "c"
                        }
                    }else {
                        a[j].className = "";//当都不符合时在设置名字为空
                    }

                }
               
            }
        }
    clearInterval(SetInterval);//清除定时器
        SetInterval =  setInterval(changee,2000);//设置定时器

    }
     aa.addEventListener("click",changee,false);//绑定按键事件
     SetInterval =  setInterval(changee,2000);//设置定时器