轮播图的实现及步骤讲解
轮播图设计的原理及思路
⾸先在写好css之后 我们要对接下来的js进⾏⼀个分步操作
怎么转发第⼀步，我们可以先写好⼀个⾃动播放的逻辑：
这部分我们⽤的⽅法就是 采⽤图⽚作为背景图⽚，在js⾥边通过索引来实现图⽚的切换
第⼆步，我们要实现⼀些简单的细节，当我们的⿏标放上去的时候，我们希望这个时候箭头显⽰，并且当前的⾃动播放停⽌，当⿏标移⾛的时候，箭头也就随之隐藏，这部分很容易实现，我们只需要在⿏标放在上边的时候，通过清除定时器clearInterval（）
什么是SM⿏标移⾛的时候，我们可以重新启⽤定时器，这时我们为了⽅便操作，我们把⾃动播放写成⼀个函数，⽅便我们在重新需要使⽤的时候调⽤⽅便。
第三步，相对来说，也是稍微有⼀点难度，需要为每⼀个⼩圆点绑定⼀个⿏标放上去的处理程序，我们通过for循环遍历⼩圆点，当⿏标放到⼩圆点的时候清除当前的样式，之后在被⿏标放上的⼩圆点添加active样式
此时较为重要的东西来了，⼩圆点移动之后，我们需要让图⽚也要跟着移动，怎么才能实现这样的效果呢？⼤多数⼈对于这个点都会
有点模糊，进⽽觉得有难度，其实不然，只要我们仔细思考⼀下问题就会迎刃⽽解
我们在html⽂件中加⼊data-id，将每⼀个⼩圆点设置⼀个索引号，为了⽅便我们后续引⽤调取他的值
Attribute(‘data-id’)); 通过这种⽅法 获取到⼩圆点此时的索引，并将它赋值给当前的
current，然后我们让背景显⽰为获取到的这个索引的对应图⽚，xxx.style.backgroundImage = “url(’”+ urls[current] +"’)";
这样我们就轻松实现了 ⼩圆点的跳转对应图⽚的跳转
第四步 就是⼀些细节的完善，我们需要在点击按钮的时候，图⽚会随着滚动，就是两个简单的点击事件，⼀个是左边的按钮，⼀个是右边的按钮
点击事件就需要注意两个问题 向左播放点击的时候，我们要判断当下⼀张
图⽚是第⼀张的时候 ，接下来在点击的时候，我们就要让next=图⽚的长度减1
上海美心月饼接下来就是根据索引的变化，清除当前的样式，设置next的样式，改变背景图⽚
当前样式更新
右边的按钮点击事件是⼀样的，不同的是判断最后⼀张图⽚的时候，下⼀张要将next=0
以下是代码部分，如有错误请批评指正，我们共同进步·
<style>
#lunbo {
width: 800px;
height: 600px;
position: relative;
margin: 0 auto;
}
#image div {
width: 800px;
height: 600px;
background-image: url("./picture/bing09.jpg");
background-position: center;
}
#circle {
position: absolute;
bottom: 20px;
left: 50%;
height: 20px;
cursor: pointer;
}
#circle div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: gray;
display: inline-block;
margin: 0 5px;
}
}
#btn #left,#btn #right {
font-size: 50px;
line-height: 30px;
text-align: center;
opacity: 0.7;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
color: aliceblue;
}
#left {
left: 20px;
}
#right {
right: 20px;
}
#circle .active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="lunbo">
<div id="image">
<div id="xxx"></div>
</div>
<div id="circle">
<div data-id="0" class="circlebtn"></div>
<div data-id="1" class="circlebtn"></div>
<div data-id="2" class="circlebtn active"></div>
<div data-id="3" class="circlebtn"></div>
<div data-id="4" class="circlebtn"></div>
</div>
<div id="btn">
哈尔滨华梅西餐厅<div id="left"><</div>
<div id="right">></div>
</div>
</div>
<script>
var urls = [
'./picture/bing09.jpg',
'./picture/bing14.jpg',
'./picture/zhaohanyingzi19.jpg',
'./picture/3.jpg',
'./picture/4.jpg',
];
var current = 2;
var xxx = ElementById('xxx');
//获取每⼀个轮播点
var circle = ElementById('circle');
var circlebtn = ElementsByClassName('circlebtn'); var lunbo = ElementById('lunbo');
var left = ElementById('left');
var right = ElementById('right');
var LB, next;
//js⾥边设置圆点那个块居中显⽰
circle.style.marginLeft = '-' + circle.clientWidth/2 + 'px';
console.dir(circle);
circle.offsetWide
//当⿏标放到图⽚上的时候，显⽰箭头，停⽌⾃动播放
left.style.display = 'block';
right.style.display = 'block';
clearInterval(LB);
}
//⿏标移⾛的时候
left.style.display = 'none';
right.style.display = 'none';
//继续轮播
LBS();
}
//⿏标放上⼩圆点的时候，
for (var i = 0; i < circlebtn.length; i++) {
//
circlebtn[i].onmouseover = function () {
circlebtn[current].ve('active');世界大城市
/
/被⿏标放上去的⼩圆点添加active样式
this.classList.add('active');
//将⿏标现在的索引赋值给图⽚的索引
current = Attribute('data-id'));
//图⽚的显⽰即改为⼩圆点索引对应图⽚的索引
xxx.style.backgroundImage = "url('" + urls[current] + "')";
}
}
//接下来完善，点击按钮的时候实现图⽚播放
function play(direction) {
if(direction == 'left') {
next = current - 1;
if(next < 0){
next = urls.length - 1;
}
}else {
元宵节的古诗next = current + 1;
if(next >= urls.length) {
next = 0;
}
}
circlebtn[current].ve('active');
circlebtn[next].classList.add('active');
xxx.style.backgroundImage = "url('" + urls[next] + "')";
current = next;
}
play('left');
};
play('right');
};
//⾃动播放
function LBS() {
LB = setInterval(function () {
next = current + 1;
if (next >= urls.length) {
//当下⼀个超过图⽚的长度的时候
next = 0;
}
xxx.style.backgroundImage = "url('" + urls[next] + "')"; circlebtn[current].ve('active');
circlebtn[next].classList.add('active'); current = next;
}, 3000);
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论