| js图片切换（点击左右按钮，小圆点切换图片，自动轮播） | 您所在的位置：网站首页 › html5图片左右切换 › js图片切换（点击左右按钮，小圆点切换图片，自动轮播） |
js图片切换（点击左右按钮，小圆点切换图片，自动轮播）
|
点击左右按钮，小圆点切换图片 ; ; 1/4![span""/span](span"./img/1.jpg"/span)
one
小圆点的特殊样式 .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//遍历小圆点 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[i].index = i; oli[i].onclick = function () { //关键 count = this.index; for (var j =0; j console.log(oli.length); count++; if (count > oli.length-1 ) { count = 0; } change(); }, 1000)效果 由于代码重复很多，可以使用函数封装 //封装函数 } function change(){ for (var j =0; j |
【本文地址】
公司简介
联系我们