这篇文章主要为大家详细介绍了Java脚本语言实现图片切换效果，以及自定义属性的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Java脚本语言实现图片切换效果，自定义属性的应用供大家参考，具体内容如下
！文档类型超文本标记语言
超文本标记语言
头
meta charset='UTF-8 '
标题图片切换实例/标题
风格
正文{
背景色：# A9A9A9
边距：0px
}
ul{
填充：0;
边距：0;
}
李{
列表样式：无；
}
#图片{
宽度：670像素
高度：420像素
位置：相对；
边距：0自动；/*整个差异放到页面中间的位置*/
背景：url(img/loading.png)无重复中心；
背景色：# fff
}
#图片图像{
宽度：670像素
高度：420像素
}
#pic ul{
位置：绝对；
top:0px；
右：-50px；
}
#图片李{
宽度：40px
高度：40px
边距-底部：4px
背景：# 666;
}
#图片.活动{
背景：cadetblue
}
#pic span{
top:0px；
}
#图片p{
底部：0px
边距：0;
}
#图片p，#图片跨度{
宽度：670像素
高度：30px
行高：30px
文本对齐：居中；
位置：绝对；
左：0px
颜色：# fff
背景色：# 333;
}
/风格
脚本
window.onload=function(){
var oDiv=文档。getelementbyid(' pic ')；
var oImg=文档。getelementsbytagname(' img ')[0]；//有标签标签的地方就得有数组[0],否则不提示错误，但却会加载不出来需要的内容。
var oP=文档。getelementsbytagname(' p ')[0]；
var oNum=文档。getelementsbytagname(' span ')[0]；
var oUl=文档。getelementsbytagname(' ul ')[0]；
var aLi=oul。getelementsbytagname(' Li ')；//通过父标签找到的子标签，这里不能加数组[0]
var arrUrl=['img/1.jpg '，' img/2.jpg '，' img/3.jpg '，' img/4.jpg '，' img/5。png ']；
var arrText=['中原工学院图书馆','中工宿舍楼','玫瑰花','小猫咪','绿色盆栽'];
for(var I=0；iarrUrl.lengthi)
oul。innerhtml=' Li/Li '；//添加用"=",该写用"="
}
//初始化
//有数组的地方，大部分都有一个数字在静静的等待。数组配合数字以便找到需要的内容。
var num=0；
oimg。src=arr URL[num]；
op . innerhtml=arr text[num]；
onum。innerhtml=1 num '/' arr URL。长度；
//在保险商实验所中添加李，根据数组的长度，为保险商实验所添加里的数量
阿里[数字]。className=' active//为标签添加班级属性，需要用到类名
for(I=0；长度)
阿里[我]。index=I；//索引值，需要添加对应关系，就要想到添加索引值
//定义的有数组，就不能忘记加[0]
阿里[我]。onclick=function(){
//点击按钮，找到与之对应的图片
oimg。src=arr URL[this。index]；
op . innerhtml=arr text[this。index]；
onum。innerhtml=1 this。索引“/”数组URL。长度；
//添加对应的点击时，李的图标发生变化，两种思路
//思路1:清空当前所有活跃的样式，为当前添加此班级属性（扩展性好，但是运行速度可能不好)
for(var I=0；长度)
阿里[我]。类名=" "；
}
这是活动的
//思路2:清空前一个点击里的样式，为当前添加班级属性（定点清除)
}
}
}
/脚本
/头
身体
div id='pic '
img src=''/
跨度数量正在加载中./span
p文字说明正在加载中./p
保险商实验所
/ul
/div
/body
/html
JavaScript(JavaScript)代码片段可以简化成如下：
脚本编写
窗户。onload=function()=>
var odiv=文档。按id获取元素(' pic '):
var oimg=文档。getelementsbytagname(' img ')[0]；
var op=文档。getelement sbytagnname(' p ')[0]；
var onum=文档。getelement sbytagnname(' span ')[0]；
var oul=文档。getelementsbytagnname(' ul ')[0]；
var Ali=oul .获取元素sbytag名称(' Li ')；
var arrUrl=['img/1.jpg '，' img/2.jpg '，' img/3.jpg '，' img/4.jpg '，' img/5。png ']；
var arrText=['中原工学院图书馆-是啊中工宿舍楼-是啊玫瑰花-是啊小猫咪-是啊绿色盆栽'];
S7-1200可编程控制器：IAR农村。长度；>
oul。intra html=' Li/Li '；
}
//初始化
var num=0:
函数fnTab()
oimg。src=arr URL[num]；
运算符intra html=arr text[num]；
onum。“/”数组URL中的内部html=1。长度；
那边[号]。类名=“;
}
fntab()；
for(I=0)；我。长度；>
阿里[我].索引=I；
阿里[我].onclick=函数()
num=这个。指数
fntab()；
}
那边[号]。活动的
}
}
}
/脚本
效果图：
不会做动图！明天再试试！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。