js图片切换（点击左右按钮，小圆点切换图片，自动轮播）

点击左右按钮，小圆点切换图片

 <div>
        <button>&lt;</button>
        <button class="right">&gt;</button>
        <h2 id="cont">1/4</h2>
        <img src="./img/1.jpg" alt="" id="pic">
        <ul>
            <li class="item"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <h2 id="foot">one</h2>
    </div>

小圆点的特殊样式

 .item{
            background: lightgreen;
        }

js部分
获取元素
使用数组添加图片及图片信息

  var cont = document.getElementById('cont');
        var foot = document.getElementById('foot');
        var pic = document.getElementById('pic');
        var oli = document.getElementsByTagName('li');
        var btn = document.getElementsByTagName('button');
        var arr = [
            {
                picSrc:'./img/1.jpg',
                picCont : '1/4',
                picFoot:'one'
            },
            {
                picSrc:'./img/2.jpg',
                picCont : '2/4',
                picFoot:'two'
            },
            {
                picSrc:'./img/3.jpg',
                picCont : '3/4',
                picFoot:'three'
            },
            {
                picSrc:'./img/4.jpg',
                picCont : '4/4',
                picFoot:'four'
            }
          
        ];
        var count = 0; //记录点击次数

左边按钮

 //左边按钮
            btn[0].onclick = function () {
                count--;
                if(count<0){
                    // 图片到达第一张，使图片继续往后，即到达最后一张
                    count = arr.length-1;
                }
                for (var j =0; j<oli.length ; j++){//遍历小圆点
                    oli[j].className = '';    //初始化小圆点样式
                }
                 //将点击的次数作为小圆点的下标，改变小圆点的特殊样式
                oli[count].className = 'item'; 
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
                
            }

右边按钮

 //右边按钮
            btn[1].onclick = function () {
                count++;
                if(count>arr.length-1){  
                    //如果点击的次数大于已有的图片数（到达最后一张图片），将count重新归0，即回到第一张
                    count = 0;
                }
                for (var j =0; j<oli.length ; j++){  //遍历小圆点
                    oli[j].className = '';   //初始化小圆点样式
                }
                oli[count].className = 'item';
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
            }

点击小圆点

 //点击小圆点
            for (var i = 0 ;i<oli.length; i++){
                oli[i].index = i;
                oli[i].onclick = function () {
                    //关键
                    count = this.index;
                    for (var j =0; j<oli.length ; j++){//遍历小圆点
                    oli[j].className = '';    //初始化小圆点样式
                }
                //将点击的次数作为小圆点的下标，改变小圆点的特殊样式
                oli[count].className = 'item';  
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
                }
            }

自动轮播

    setInterval(function () {
                console.log(oli.length);
                count++;
                if (count > oli.length-1 ) {
                    count = 0;
                }
                change();
            }, 1000)

效果

由于代码重复很多，可以使用函数封装

 //封装函数
            }
            function change(){
                for (var j =0; j<oli.length ; j++){
                    oli[j].className = '';  
                }
                oli[count].className = 'item'; 
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
            }

使用时调用即可