这个例子给大家
分享一个具体代码js旋转图,供大家
参考,具体内容如下
{ Jiantou。
身高:36px;
宽度:24px;
行高:36px;
文本对齐:中心;
背景颜色:RGBA(0, 0, 0。3);
字体大小:14px;
颜色:# FFF;
位置:绝对;
顶部:0;
底部:0;
保证金:自动0;
显示:无;
Z指数:99999;
光标:指针;
}
{左。
左:0;
}
{啊。
权利:0;
}
UL Li {
身高:20px;
宽度:20px;
背景颜色:# b7b7b7;
浮点数:左;
边框半径:50%;
保证金:2px;
}
{ UL
位置:绝对;
底部:15px;
保证金:0汽车;
背景颜色:RGBA(255, 255, 255。3);
边界半径:10px;
左:300px;
Z指数:9999;
光标:指针;
}
{,
背景颜色:# F40;
}
{ IMG
宽度:790px;
身高:340px;
位置:绝对;
不透明性:0;
转换:全部;
/ *过渡:所有0.5s; / * * /时间短
过渡:不透明0.5s; / *不写都不会
影响Z * /
Z指数:0;
}
{,
宽度:790px;
身高:340px;
}
{ #出来
宽度:790px;
身高:340px;
保证金:100px汽车;
职位:相对;
}
#:hover.jiantou {
显示块;
}
>
var = document.getelementbyid();
VaR img = document.images;
VaR左= document.getelementsbyclassname(左)项目(0);
VaR对= document.getelementsbyclassname(右)项目(0);
无功lilist = document.getelementsbytagname(礼);
var索引= 0;
var定时器= null;
VaR Timer1 = null;
right.onclick =
函数(){
所有的不透明度都
设置为0。
/ *(var i = 0;i < img.length;i++){
img {我}。style.opacity = 0;
}
img {指数}。style.opacity = 0;
img {指数}。style.zindex = 0;
lilist { } classname =指标;
索引;
索引= 7索引= 0:索引+;
lilist { } =类名指标;
img {指数}。style.opacity = 1;
img {指数}。style.zindex = 1;
};
left.onclick =函数(){
img {指数}。style.opacity = 0;
lilist { } classname =指标;
img {指数}。style.zindex = 0;
索引—;
索引= 0索引= 7:索引—;
lilist { } =类名指标;
img {指数}。style.opacity = 1;
img {指数}。style.zindex = 1;
};
对于(var i = 0;i < lilist.length;i++){
我lilist { }。值=我;
我lilist { }。onmouseover =函数(){
var =;
定时器= setTimeout(){()函数(
img {指数}。style.opacity = 0;
lilist { } classname =指标;
img {指数}。style.zindex = 0;
指数= that.value;
lilist { } =类名指标;
img {指数}。style.opacity = 1;
img {指数}。style.zindex = 1;
},300)
};
我lilist { }。onmouseout=函数(){
ClearTimeout(定时器);
}
}
out.onclick =
功能(e){
console.log(e.target);
};
1 = setInterval(right.onclick,2000);
out.onmouseover =函数(){
ClearInterval(1);
};
out.onmouseout =函数(){
1 = setInterval(right.onclick,2000);
};
var = 5
var arr = { };
VaR img = document.images;
对于(var i = 0;i < img.length;i++){
如果(i < 5){
Arr.push(img {我}。offsetheight);
{ }人
img {我},位置= 'abl风格。
}
}
以上是本文的全部内容,希望能对您有所帮助,希望大家多多
支持。