仿一个网站要多少钱百度搜索收录入口
先看效果叭:
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>