仿一个网站要多少钱网站优化公司认准乐云seo
先看效果叭：
js实现图片切换
思路：首先图片下方有切换到上一张和下一张的按钮，实现图片切换实际上就是点击相应按钮时（给按钮添加点击事件），图片路径对应改变，也就是img.src属性，但在这里，并不推荐使用改变src属性来切换图片，因为，每点击一次按钮，就要重新给src赋值新的地址，太过麻烦，这里采用将所有的图片路径保存在一个数组中，只要改变数组的索引值，就能实现改变图片的效果。
再看代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0;margin: 0;}#pic{width: 250px;margin: 100px auto;text-align: center;background-color: pink;padding: 10px;}</style></head><body><div id="pic"><p id="info"></p><img src="img/摆烂.png"><button id="prev">< 上一张</button><button id="next">下一张 ></button></div></body><script type="text/javascript">window.onload=function(){//先获取到perv和next，再分别给它们添加点击事件var prev=document.getElementById("prev");var next=document.getElementById("next");//获取img,修改图片就是修改img的src属性,用img.src="img/哈哈.png";切换到下一张，但这种方法不可取（太麻烦）//使用getElementsByTagName获取到的是一个数组，就算获取到一个元素，也会封装到数组中var img=document.getElementsByTagName("img")[0];//创建数组来保存图片路径var imgArr=["img/摆烂.png","img/哈哈.png","img/就这.png","img/哭哭.png","img/迷茫.png"];//创建索引保存正在显示的图片下标，默认第一张，下标为0var index=0;//设置提示文字var info=document.getElementById("info");//获取info后，用innerHTML为p标签添加文字info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";//分别为两个按钮绑定点击事件prev.onclick=function(){index--;//做判断，如果当前图片是第一张，再点上一张就切换到第五张，让图片可以循环点击if(index<0){index=imgArr.length-1;}img.src=imgArr[index];//每点击上一张时，提示文字也跟着变info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";};next.onclick=function(){ index++;if(index>imgArr.length-1){index=0;}img.src=imgArr[index];//每点击下一张时，提示文字也跟着变info.innerHTML="第"+(index+1)+"/"+(imgArr.length)+"张";}; };</script>
</html>