JavaScript实现带有子菜单和控件的slider轮播图效果
程序员文章站
2022-07-06 21:05:36
大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于javasc...
大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于javascript实现带有子菜单和控件的slider轮播图效果，具体实现代码如下所示：
实现效果：
实现原理：
// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）
实现代码：
<!doctype html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<style type="text/css">
*{
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 #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current{
background-color: #03c03c;
}
#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;
}
</style>
</head>
<body>
<div class="all" id="all">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="./images/01.jpg" width="500" height="200"></li>
<li><img src="./images/02.jpg" width="500" height="200"></li>
<li><img src="./images/03.jpg" width="500" height="200"></li>
<li><img src="./images/04.jpg" width="500" height="200"></li>
<li><img src="./images/05.jpg" width="500" height="200"></li>
</ul>
<!-- 图片子菜单 -->
<ol>
</ol>
<!-- 左右切换按钮 -->
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
<!-- script -->
<script type="text/javascript">
// 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张
// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）
// 1. 获取事件源以及相关元素
var all = document.getelementbyid("all");
var screen = all.firstelementchild || all.firstchild;
var imgwidth = screen.offsetwidth;
var ul = screen.firstelementchild || screen.firstchild;
var ol = screen.children[1];
var div = screen.lastelementchild || screen.lastchild;
var spanarr = div.children;
// 2. 复制第一张图片所在的li，添加到ul的最后面
var ulnewli = ul.children[0].clonenode(true);
ul.appendchild(ulnewli);
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
for(var i=0; i<ul.children.length-1; i++){
var olnewli = document.createelement("li");
olnewli.innerhtml = i+1;
ol.appendchild(olnewli);
}
var olliarr = ol.children;
olliarr[0].classname = "current";
// 4. 鼠标放到ol的li上切换图片
for(var i=0; i<olliarr.length; i++){
// 自定义属性，把索引值绑定到元素的index属性上
olliarr[i].index = i;
olliarr[i].onmouseover = function(){
// 排他思想
for(var j=0; j<olliarr.length; j++){
olliarr[j].classname = "";
}
this.classname = "current"
// 鼠标放到小方块上时，索引值和key以及square同步
// key = this.index;
// square = this.index;
key = square = this.index;
// 移动盒子
animate(ul, -this.index*imgwidth);
}
}
// 5. 添加定时器
var timer = setinterval(autoplay, 1000);
// 固定向右切换图片
// 两个定时器（一个记录图片，一个记录子菜单栏）
var key = 0;
var square = 0;
function autoplay(){
// 通过key的自增来模拟图片的索引值，然后移动ul
key++;
if(key > olliarr.length){
// 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张
ul.style.left = 0;
key = 1;
}
animate(ul, -key*imgwidth);
// 通过控制square的自增来模拟小方块的索引值，然后点亮盒子
// 排他思想做小方块
square++;
if(square > olliarr.length-1){
// 索引值不能大于5，如果大于5则立即变为0；
square = 0;
}
for(var i=0; i<olliarr.length; i++){
olliarr[i].classname = "";
}
olliarr[square].classname = "current";
}
// 鼠标放上去清除定时器，移开启动定时器
all.onmouseover = function(){
div.style.display = "block";
clearinterval(timer);
}
all.onmouseout = function(){
div.style.display = "none";
timer = setinterval(autoplay,1000);
}
// 6. 左右切换图片（鼠标放上去显示，移开隐藏）
spanarr[0].onclick = function(){
// 通过控制key的自增来模拟图片的索引值，然后移动ul
key--;
if(key<0){
// 先移到最后一张，然后key的值取前一张的索引值，然后向前移动
ul.style.left = -imgwidth*(olliarr.length) + "px";
key = olliarr.length-1;
}
animate(ul, -key*imgwidth);
// 通过控制square的自增来模拟小方块的索引值，然后点亮小方块
square--;
if(square<0){
// 索引值不能大于等于5，如果为5，立即变为0
square = olliarr.length-1;
}
for(var i=0; i<olliarr.length; i++){
olliarr[i].classname = "";
}
olliarr[square].classname = "current";
}
spanarr[1].onclick = function(){
// 右侧的和定时器一模一样
autoplay();
}
// 动画封装
var absspeed = 10; //设定步长
function animate(ele, target){
clearinterval(ele.timer);
var speed = target > ele.offsetleft ? absspeed : -absspeed;
ele.timer = setinterval(function(){
var val = target - ele.offsetleft;
ele.style.left = ele.offsetleft + speed + "px";
if(math.abs(val) < math.abs(speed)){
ele.style.left = target + "px";
clearinterval(ele.timer);
}
}, 10)
}
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的javascript实现带有子菜单和控件的slider轮播图效果，希望对大家有所帮助