-
关键代码如下所示：
图片轮播
经{。
宽度：600px；
身高：750px；
职位：相对；
保证金：30px汽车0；
溢出：隐藏；
}
#箱{
宽度：600px；
身高：750px；
位置：绝对；
上图：0px；
左：0px；
溢出：隐藏；
overflow-x： / * * /自动；
}
#箱# CON {
宽度：6000px；
身高：750px；
溢出：隐藏；
}
#con img{
浮点数：左；
宽度：600px；
身高：750px；
}
# btnl {
位置：绝对；
左：0px；
上图：366px；
宽度：36px；
身高：36px；
Background: URL (images/btnL.webp) 00 no-repeat;
光标：指针；
}
# btnr {
位置：绝对；
右：0px；
上图：366px；
宽度：36px；
身高：36px；
背景：URL（图像/ btnr。PNG）00不重复；
光标：指针；
}
# Num {
位置：绝对；
底部：10px；
左：148px；
溢出：隐藏；
列表样式：无；
}
#民李{
浮点数：左；
保证金：0 5px；
字体大小：16px；
行高：25px；
身高：25px；
宽度：25px；
背景：# CCC；
文本对齐：中心；
光标：指针；
}
# num选择{李。
背景颜色：绿色；
颜色：白色；
}
一
二
三
四
五
六
VaR箱= document.getelementbyid（'box）；
无功控制= document.getelementbyid（'con）；
VaR IMGS = con.getelementsbytagname（'img）；
无功btnl = document.getelementbyid（'btnl）；
无功btnr = document.getelementbyid（'btnr）；
VaR Num = document.getelementbyid（'num）；
VaR LIS = num.getelementsbytagname（李的）；
VaR Timer1 = null，定时器= null；
无功imgw = IMGS { 0 }。clientwidth；
变量x＝0；
功能（imgscroll）{ / /图片切换
VaR的开始= box.scrollleft；
var = imgw××；
var更改=结束启动；
无功minstep = 0；
无功maxstep = 30；
VaR步长=变化/ maxstep；
ClearInterval（定时器）；
Timer2 = setInterval（）{（）函数（
minstep + +；
/ / console.log（minstep）；
如果（minstep > = maxstep）{
ClearInterval（定时器）；
}
启动+ =步长；
scrollLeft =启动箱；
}，20）
对于（var i = 0；i < lis.length；i++）{
LIS {我}。类名=不关；
}
LIS {X} classname = 'select；
}
函数移动（3S）
ClearInterval（1）；
1 = setInterval（）{（）函数（
++；
如果（X = IMGS。长度）{
x＝0；
}
imgscroll（）；
对于（var i = 0；i < lis.length；i++）{
LIS {我}。类名=不关；
LIS {X} classname = 'select；
}
}，3000）；
}
（移动）；默认启动滚动功能；
BtnR。onclick =函数（）{
ClearInterval（1）；
++；
如果（X = IMGS。长度）{
x＝0；
}
imgscroll（）；
移动（）；
}
BtnL。onclick =函数（）{
ClearInterval（1）；
X；
如果（x＜0）{
x = imgs.length-1；
}
imgscroll（）；
移动（）；
}
对于（var i = 0；i < lis.length；i++）{
索引；
LIS {我}。onclick =函数（）{
x = this.index；
imgscroll（）；
移动（）；
}
}
以上是萧边介绍JS仿hao123导航页图片轮播的效果，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复你。谢谢你的支持网站。