发布时间:2025-12-11 00:40:08 浏览次数:15
具体内容如下
知识点:
1.window.onload网页全部加载完后再执行
2.获取元素 设置属性
3.临界情况判断
运行效果:
点击上一张下一章切换图片
代码:
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>#box{width:1200px;margin:0auto;}</style><body><pid="box"><imgid="icon"src="images/阿鲁1.gif"alt=""><p></p><buttonid="prep">上一张</button><buttonid="next">下一张</button></p><script>window.onload=function(ev){//1.获取标签varprep=document.getElementById('prep');varnext=document.getElementById('next');varicon=document.getElementById('icon');//2.点击varcurrentIndex=1,minIndex=1,maxIndex=10;prep.onclick=function(ev1){if(currentIndex===minIndex){currentIndex=maxIndex;}else{currentIndex--;}icon.setAttribute('src','images/阿鲁'+currentIndex+'.gif');};next.onclick=function(ev1){if(currentIndex===maxIndex){currentIndex=minIndex;}else{currentIndex++;}icon.setAttribute('src','images/阿鲁'+currentIndex+'.gif');}}</script></body></html>看完了这篇文章,相信你对“JS实现图片切换特效的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注本站行业资讯频道,感谢各位的阅读!