JS横幅（鼠标）旋转木马效果

1。要达到的效果

1。点击左右切换图片

2。点击小圆圈切换图片。

两。效果图
三。代码

1.css
体、IMG、跨度、UL、李{ margin: 0；padding: 0；}
# DIV1 {宽度：600px；身高：350px；保证金：150px汽车；边界：10px solid # EEE；位置：位置：；}
img {宽度：600px；身高：350px；}
跨{显示：内联块；位置：绝对；宽度：50px；身高：50px；边界半径：25px；背景：RGBA（边界半径，L）；丹；玉；威；威；卫；玉；}。
跨度：悬停{背景：RGBA（255255255。5）；颜色：黑色；变换：规模（1.3）；}
跨# L {左：10px；顶部：150px；}
跨# R {右：10px；顶部：150px；}
# DIV1 # UL {位置：绝对；底：10px；左：250px；宽度：125px；高度：20px；}。
# DIV1 # ul {列表样式：无；浮动：左；高度：20px；宽度：20px；边界半径：20px；（255255255，}）；
# DIV1 # UL。主动{背景：RGBA（0,0,0，5）；}
2.html

>
3.js
窗口。指针函数（）{
VaR DIV1 = document.getelementbyid（'div1）；
无功oimg = div1.getelementsbytagname（'img）{ 0 }；
var = document.getelementbyid跨度（L）；
无功spanr = document.getelementbyid（R'）；
VaR，= document.getelementbyid（'ul）；
VaR OLI = oul.getelementsbytagname（李的）；
无功arrimg = { 'img2 / 1。JPG，'img2 / 2。JPG，'img2 / 3。JPG，'img2 / 4。JPG，'img2 / 5。jpg}；
var = 0；
无功oldli = 0；
函数FN（数字）{
OImg。src= arrimg {数量}；
}
FN（0）；
功能fnli（NUM）{
OLI { oldli }。类名=；
OLI {民}。类名=活动；
oldli =民；
}
FnLi（0）；
单击图片周围的切换。
左键单击跨距开关
跨度。onclick =函数（）{
如果（数字< 1）{
Num = arrimg.length-1；
FN（努姆）；
FnLi（努姆）；
其他{ }
Num --；
FnLi（努姆）；
FN（努姆）；
}
}
spanr。onclick =函数（）{
如果（Num = = arrimg。length-1）{
数字= 0；
FN（努姆）；
FnLi（努姆）；
其他{ }
数字+；
FnLi（努姆）；
FN（努姆）；
}
}
Click Li实现图片切换
对于（var i = 0；i < oli.length；i++）{
OLI {我}。指数=我；
OLI {我}。onclick =函数（）{
FN（这个索引）；
FnLi（这个指数）；
}
}
}
总结

以上是萧边介绍JS横幅图片轮播效果（鼠标事件），希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复你。谢谢你的支持网站。