石家庄万达网站制作,做网站背景图片要多大,学生个人网页制作html动态,养老保险怎么买最划算先看效果叭#xff1a; js实现图片切换 思路#xff1a;首先图片下方有切换到上一张和下一张的按钮#xff0c;实现图片切换实际上就是点击相应按钮时#xff08;给按钮添加点击事件#xff09;#xff0c;图片路径对应改变#xff0c;也就是img.src属性#xff0c;但在…先看效果叭 js实现图片切换 思路首先图片下方有切换到上一张和下一张的按钮实现图片切换实际上就是点击相应按钮时给按钮添加点击事件图片路径对应改变也就是img.src属性但在这里并不推荐使用改变src属性来切换图片因为每点击一次按钮就要重新给src赋值新的地址太过麻烦这里采用将所有的图片路径保存在一个数组中只要改变数组的索引值就能实现改变图片的效果。
再看代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css*{padding: 0;margin: 0;}#pic{width: 250px;margin: 100px auto;text-align: center;background-color: pink;padding: 10px;}/style/headbodydiv idpicp idinfo/pimg srcimg/摆烂.pngbutton idprev 上一张/buttonbutton idnext下一张 /button/div/bodyscript typetext/javascriptwindow.onloadfunction(){//先获取到perv和next再分别给它们添加点击事件var prevdocument.getElementById(prev);var nextdocument.getElementById(next);//获取img,修改图片就是修改img的src属性,用img.srcimg/哈哈.png;切换到下一张但这种方法不可取太麻烦//使用getElementsByTagName获取到的是一个数组就算获取到一个元素也会封装到数组中var imgdocument.getElementsByTagName(img)[0];//创建数组来保存图片路径var imgArr[img/摆烂.png,img/哈哈.png,img/就这.png,img/哭哭.png,img/迷茫.png];//创建索引保存正在显示的图片下标默认第一张下标为0var index0;//设置提示文字var infodocument.getElementById(info);//获取info后用innerHTML为p标签添加文字info.innerHTML第(index1)/(imgArr.length)张;//分别为两个按钮绑定点击事件prev.onclickfunction(){index--;//做判断如果当前图片是第一张再点上一张就切换到第五张让图片可以循环点击if(index0){indeximgArr.length-1;}img.srcimgArr[index];//每点击上一张时提示文字也跟着变info.innerHTML第(index1)/(imgArr.length)张;};next.onclickfunction(){ index;if(indeximgArr.length-1){index0;}img.srcimgArr[index];//每点击下一张时提示文字也跟着变info.innerHTML第(index1)/(imgArr.length)张;}; };/script
/html
