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; }

使用时调用即可