图像切换效果的Javascript实现
图片切换实例
体{
背景颜色:# a9a9a9;
保证金:0px;
}
UL {
填充:0;
保证金:0;
}
李{
列表样式:无;
}
# PIC {
宽度:670px;
身高:420px;
职位:相对;
边界:0个自动;在页面中间位置。
背景:URL(IMG /加载PNG)没有重复的中心;
背景颜色:# FFF;
}
# PIC img {
宽度:670px;
身高:420px;
}
# PIC UL {
位置:绝对;
上图:0px;
右:- 50px;
}
# PIC李{
宽度:40px;
身高:40px;
边距:4px;
背景:# 666;
}
#主动{照片。
背景:军蓝色;
}
# PIC跨度{
上图:0px;
}
# PIC p {
底部:0px;
保证金:0;
}
# PIC,PIC #跨度{
宽度:670px;
身高:30px;
行高:30px;
文本对齐:中心;
位置:绝对;
左:0px;
颜色:# FFF;
背景颜色:# 333;
}
在window.onload =函数(){
无功odiv = document.getelementbyid(PIC);
无功oimg = document.getelementsbytagname { 0 }(IMG); / /标签,标签必须有{ 0 }数组,否则出错,但将不需要加载的内容。
VaR OP = document.getelementsbytagname(P){ 0 };
无功onum = document.getelementsbytagname(跨越){ 0 };
VaR,= document.getelementsbytagname(UL){ 0 };
VaR阿里= oul.getelementsbytagname(礼); / /找父标签的标签,在这里可以不加{ 0 }一个数组
无功arrurl = {IMG / 1。jpg
无功arrtext = {中原工学院图书馆
对于(var i = 0;i < arrurl.length;i++){
oul.innerhtml + = ; / /添加写使用= =。
}
初始化
有一系列的地方,大多数都有一个在静静等待的数字。用数字数组来查找所需的内容。
VaR数= 0;
oimg.src = arrurl {数量};
op.innerhtml = arrtext {数量};
onum.innerhtml = 1 +数字+/+ arrurl.length;
在UL中添加李,根据数组的长度,将增量添加到UL
ALi {数量}。类名=主动; / /添加为标签的class属性,需要使用类名
为(i = 0;i < ali.length;i++){
ALi { i }。index = i;index / index值,需要添加相应的关系,我们应该考虑添加一个索引值
定义了数组,不能忘记添加{ 0 }
ALi {我}。onclick =函数(){
单击按钮,找到相应的图片。
oimg.src = arrurl {指数};
op.innerhtml = arrtext {指数};
onum.innerhtml = 1 +这个指数+ / + arrurl.length;
添加相应的图标,改变李彦宏的两种想法
1个想法:清空当前所有活动的样式,添加类属性(对于当前的扩展是好的,但速度可能不是很好)
对于(var i = 0;i < ali.length;i++){
ALi {我} classname = ;
}
this.classname =活跃;
2个想法:单击LI样式一个空,为当前添加类属性(指定的清除)
}
}
}
正在加载数量…
正在加载文本描述…
Javascript代码片段可以简化如下:
在window.onload =函数(){
无功odiv = document.getelementbyid(PIC);
无功oimg = document.getelementsbytagname(IMG){ 0 };
VaR OP = document.getelementsbytagname(P){ 0 };
无功onum = document.getelementsbytagname(跨越){ 0 };
VaR,= document.getelementsbytagname(UL){ 0 };
VaR阿里= oul.getelementsbytagname(礼);
无功arrurl = {IMG / 1。jpg
无功arrtext = {中原工学院图书馆
对于(var i = 0;i < arrurl.length;i++){
=,.innerHTML ;
}
初始化
var = 0;
功能fntab(){
oimg.src = arrurl {数量};
op.innerhtml = arrtext {数量};
onum.innerhtml = 1 +数字+/+ arrurl.length;
ALi {数量}。类名= ;
}
FnTab();
为(i = 0;i < ali.length;i++){
ALi { i }。索引= i;
ALi {我}。onclick =函数(){
Num = this.index;
FnTab();
}
ALi {数量}。类名=活跃;
}
}
}
设计素描 uff1a
没有电影!明天再试一次!
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。