JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript实现带有子菜单和控件的slider轮播图效果，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果，具体实现代码如下所示：
实现效果：
实现原理：
// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）
实现代码：
轮播图
{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all
{
width: 500px;
height: 200px;
padding: 7px;
margin: 100px auto;
position: relative;
box-shadow: 1px 1px 5px #2d2d2d;
}
.screen
{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li
{
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul
{
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.all ol
{
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li
{
float: left;
width: 20px;
height: 20px;
text-align: center;
BACkground-color: #fff;
border: 1px solid #cc
c;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current
{
BACkground-color: #03c03
c;
}
#arr
{
display: none;
}
#arr span
{
width: 40px;
height: 40px;
left: 5px;
top: 50%;
position: absolute;
margin-top: -20px;
BACkground-color: #000;
cursor: pointer;
line-height: 35px;
text-align: center;
font-weight: bold;
font-family: "微软雅黑";
font-size: 30px;
color: #fff;
opacity: 0.3;
border-radius: 50%;
box-shadow: 1px 1px 3px #2d2d2d;
}
#arr #right
{
right: 5px;
left: auto;
}
以上所述是小编给大家介绍的JavaScript实现带有子菜单和控件的slider轮播图效果。菜鸟教程 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得菜鸟教程不错，可分享给好友！感谢支持。
