本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下
CSS:
& lt; style>
* {
保证金:0;
填充:0;
list-style:没有;
文字修饰:没有;
字体类型:“微软”YaHei, Arial, Helvetica, sans-serifsans-serif;
}
身体{
背景:# eee;
}
# Bigbox {
宽度:720 px;
身高:420 px;
边界:1 px固体# 333;
保证金:60 px汽车;
}
#箱{
宽度:700 px;
身高:400 px;
位置:相对;
溢出:隐藏;
上图:10 px;
左:10 px;
}
# Ul {
身高:400 px;
位置:绝对的;
上图:0;
左:0;
}
李# Ul {
宽度:700 px;
身高:400 px;
浮:左;
}
#{离开
宽度:60 px;
高度:50 px;
这个特性:30%;
背景:rgba (96、96、96、5);
位置:绝对的;
上图:50%;
左:0;
margin-top: -25 px;
颜色:# fff;
行高:50 px;
text-align:中心;
光标:指针;
字体大小:20 px;
显示:没有;
}
#{正确
宽度:60 px;
高度:50 px;
这个特性:30%;
背景:rgba (96、96、96、5);
位置:绝对的;
上图:50%;
右:0;
margin-top: -25 px;
颜色:# fff;
行高:50 px;
text-align:中心;
光标:指针;
字体大小:20 px;
显示:没有;
}
& lt;/style>
之前
html:
& lt; div id=癇igbox”比;
& lt; div id=昂凶印北?
& lt; ul id=皍l”比;
& lt; li>
1 & lt; img src=" https://www.yisu.com/zixun/img/1.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
2 & lt; img src=" https://www.yisu.com/zixun/img/2.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
3 & lt; img src=" https://www.yisu.com/zixun/img/3.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
4 & lt; img src=" https://www.yisu.com/zixun/img/4.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
5 & lt; img src=" https://www.yisu.com/zixun/img/5.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
6 & lt; img src=" https://www.yisu.com/zixun/img/6.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
7 & lt; img src=" https://www.yisu.com/zixun/img/7.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
8 & lt; img src=" https://www.yisu.com/zixun/img/8.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
9 & lt; img src=" https://www.yisu.com/zixun/img/9.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt; li>
10 & lt; img src=" https://www.yisu.com/zixun/img/10.jpg "宽度=?00%”高度=?00%”比;
& lt;/li>
& lt;/ul>
& lt; div id=白蟆钡脑谧? lt;/div>
& lt; div id=罢贰钡脑谟? lt;/div>
& lt;/div>
& lt;/div>
之前
js:
& lt; script>
窗口。onload=function () {
var n=0;
var计时器=零;
var timer1=零;
var timer2=零;
var timer3=零;
var oDiv=. getelementbyid(盒)
var oUl=. getelementbyid (“Ul”)
var奥利=oUl.getElementsByTagName(李)//获取div宽度
var oDivWidth=getStyle (oDiv“宽度”).split (px)[0]//复制oUl的innerHTML
oUl。innerHTML +=oUl.innerHTML//设置ul宽度
oUl.style。宽度=奥利。长度* oDivWidth +“px”//获取ul宽度
var oUlWidth=getStyle (oUl“宽度”).split (px)[0]//封装获取非行间样式函数
函数getStyle (obj sName) {
如果(obj.currentStyle) {
返回obj.currentStyle [sName];
其他}{
返回getComputedStyle (obj, false) [sName];
}
}//执行函数
clearInterval (timer3)
timer3=setInterval(函数(){
Run ()
},2000)//封装运动函数
函数运行(){
clearInterval(计时)
计时器=setInterval(函数(){
n -=20;
oUl.style。左=n +“px”
如果(n % oDivWidth==0) {
clearInterval (timer3)
clearInterval(计时)
clearInterval (timer1)
timer1=setTimeout(函数(){
Run ()
},2000)
}
如果(n & lt;=-oUlWidth/2) {
oUl.style。左=0;
n=0;
clearInterval (timer3)
clearInterval(计时)
clearInterval (timer1)
timer1=setTimeout(函数(){
Run ()
},2000)
}
},30)
}//鼠标移入停止滚动
oDiv。onmouseover=function () {
Left.style。显示='块'
Right.style。显示='块'
clearInterval (timer3)
clearInterval (timer2)
timer2=setInterval(函数(){
如果(n % oDivWidth==0) {
clearInterval(计时)
clearInterval (timer1)
}
},30)
}//鼠标移出继续执行
oDiv。onmouseout=function () {
Left.style。显示='没有'
Right.style。显示='没有'
clearInterval (timer3)
clearInterval (timer2)
clearInterval (timer1)
timer1=setTimeout(函数(){
Run ()
},2000)
}//向左
离开了。onclick=function () {//清除所有定时器
clearInterval(计时)
clearInterval (timer1)
clearInterval (timer2)
clearInterval (timer3)
计时器=setInterval(函数(){
n -=50;
oUl.style。左=n +“px”
如果(n % oDivWidth==0) {
clearInterval(计时)
}
如果(n & lt;=-oUlWidth/2) {
oUl.style。左=0;
n=0;
}
},30)
}//向右
正确的。onclick=function () {
clearInterval(计时)
clearInterval (timer1)
clearInterval (timer2)
clearInterval (timer3)
如果(n==0) {
n=-oUlWidth/2
}
clearInterval(计时)
计时器=setInterval(函数(){
n +=50;
oUl.style。左=n +“px”
如果(n % oDivWidth==0) {
clearInterval(计时)
}
},30)
}
}
& lt;/script>
