这篇文章主要为大家详细介绍了射流研究…实现图片切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了射流研究…实现图片切换的具体代码，供大家参考，具体内容如下

知识点：

1 .窗户。装载网页全部加载完后再执行

2.获取元素设置属性

3.临界情况判断

运行效果：

点击上一张下一章切换图片

代码：

！文档类型超文本标记语言

html lang='en '

头

meta charset='UTF-8 '

标题标题/标题

/头

风格

#框{

宽度：1200像素

边距：0自动；

}

/风格

身体

div id='box '

img id='icon' src='images/阿鲁1.gif' alt=' '

p/p

按钮id='准备'上一张/按钮

按钮id='下一步'下一张/按钮

/div

脚本

window.onload=function (ev) {

//1.获取标签

var prep=文档。getelementbyid(' prep ')；

var next=文档。getelementbyid(' next ')；

var icon=文档。getelementbyid(' icon ')；

//2.点击

var currentIndex=1，minIndex=1，maxIndex=10

prep.onclick=function (ev1) {

if (currentIndex===minIndex){

currentIndex=maxIndex

}否则{

当前索引-；

}

icon.setAttribute('src '，' images/阿鲁currentIndex .gif’)；

};

next.onclick=function (ev1) {

if (currentIndex===maxIndex){

currentIndex=minIndex

}否则{

currentIndex

}

icon.setAttribute('src '，' images/阿鲁currentIndex .gif’)；

}

}

/脚本

/body

/html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。