JS实现图片自动播放

功能实现

H5页面的完成

页面设计思路：

        通过日常的网页浏览，发现见到的图片播放页面，不仅有图片，还有图片相应的内容，以及下面的一些小点（导航点），点击能够显示对应的图片。
        因此，我们可以设计两个部分，一部分用来存放图片，一部分用来存放这些导航点。通过设计两个同一级的div盒子，分别存放对应的内容。第一个div存放图片，将img标签嵌入。第二个div用来实现小圆点。圆点可以使用ul列表来实现，但是我们要的不是它自带的圆点样式，因为太小了，我们要使用的是li。给li设置等宽高，再使用border-radius:50%，就可以将其变为一个实心圆。接着通过opcity设置透明度，使其变透明，当图片跳转到对应的li，再将其恢复透明度

HTML代码：

		<div class="d2">
                <img src="./img_02.jpg" alt="" class="img01">
            div>
            <div class="d22">
                <ul class="ul1">
                    <li class="active">li>
                    <li>li>
                    <li>li>
                    <li>li>
                    <li>li>
                ul>
            div>

关键CSS代码：

		/* 对ul采用display布局，使li能够水平放置*/
		 .ul1{
            list-style: none;
            margin: 0;
            margin-right: 10px;
            width: 100px;
            display: flex;
            align-items: center;
        }
        
        /* 对li设置宽高，可见度*/
        .ul1 li{
            margin: 0 4px;
            color: rgba(255,255,255,0);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255);
            opacity: 0.5;
            cursor: pointer;
        }
        
        /* 与后面的JS结合*/
        li.active{
            opacity: 1;
        }

页面展示：

JS的实现

一张图片能够通过img展现出来，依赖于它的src属性，那么要实现图片的播放，就需要改变src。
通过document,querySelector(‘.类名1’)获取类名为类名1的DOW元素，改变该元素的src。此时我们可以实现图片的切换，但只进行了一次。接着要解决怎么让它持续播放，首先想到了循环。但定义一个死循环，显然不好。此时想到定时器，JS有定时器函数，可以通过该函数设定时间来进行播放。
图片的播放通过改变src的值，因此，将图片命名为img_0x，x为递增的数字，方便我们修改，定义一个数字来表示x，再通过反引号（· ·）将数字插入字符串img_0中。
例如：.src=img_01${x}

解决了图片，就该实现小圆点的播放，小圆点是通过给对应的元素增加类.active来实现。
用到的语法为 ：
.classList.add(‘类名’)    .classList.remove(‘类名’) 注意：此处的类名不需要加.

当图片跳转，要将跳转前的小圆点可见度变为原来的数值，再将跳转后图片对应的小圆点设置为.active的值；就需要通过增加和删除类名实现

JS代码：

		let i=2;
        let j=0;
        const d3=document.querySelectorAll('.d22 .ul1 li')
        //图片、圆点切换函数
        function t1(){
            console.log(d3)
            const d1=document.querySelector('.d2 .img01')
            const d2=document.querySelector('.active')
            d2.classList.remove('active')

            i++
            //由于我的图片空了一张没有5，需要对i进行处理
            if(i==5){
                i++

            }else if(i==8){
                i=2
            }
            j++
            if(j==5){
                j=0;
            }
            console.log(j)
            d3[j].classList.add('active')
            d1.src=`./img_0${i}.jpg`
        }
        /*定时器,每个1000毫秒=1秒，执行一次，t1不能带（）不然只会执行一次
          t为该定时器的编号，方便关闭定时器
        */
        let t=setInterval(t1,1000)

最终演示

手机录（win自带录屏bug）