无缝轮播图
- 原理:
- 首先需要一个装所有图片的盒子。然后通过移动装图片的盒子来使图片显示出来。
- 需要封装一个移动框架,在图片移动时有时间缓冲。
- 如果需要感觉图片移动时连贯的话,就需要将第一张图片复制一张到最后面,然后当图片切换到最后一张图片时候,立马将图片跳转至第一张,就会给我们一种图片是连贯的错觉。
- 需要用到的知识点:定位,浮动,动画,定时器
2.实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12.无缝轮播图</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
#box {
position: relative;
width: 520px;
height: 280px;
margin: 50px auto;
border: 1px solid #ccc;
overflow: hidden;
}
#box ul {
position: absolute;
left: 0;
top: 0;
height: 280px;
width: 5000px;
}
#box ul li {
float: left;
width: 520px;
height: 280px;
}
#leftBtn,
#rightBtn {
position: absolute;
top: 90px;
width: 45px;
height: 100px;
background: url('img/sprite.png') no-repeat;
}
#rightBtn {
right: 0;
background-position: -45px 0;
}
#box p {
position: absolute;
left: 0;
bottom: 6px;
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
#box p span {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
margin: 0 3px;
cursor: pointer;
}
#box p span.active {
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
</ul>
<a href="javascript:;" id="leftBtn"></a>
<a href="javascript:;" id="rightBtn"></a>
<p>
<span class="active"></span>
<span></span>
<span></span>
</p>
</div>
<script src="js/move.js"></script>
<script>
// 获取元素
var box = document.querySelector('#box');
var imgbox = document.querySelector('ul');
var lis = box.querySelectorAll('li');
// 获取按钮
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
// 获取span 小圆点按钮
var spans = box.querySelectorAll('span');
// 获取一个图片的宽度
var imgW = lis[0].offsetWidth;
// 记录第几张图片
var count = 0;
var timer = null;
var flag = true;//让轮播动画完成,才开启下一个轮播图片
// 无缝链接 克隆第一个节点
imgbox.appendChild(lis[0].cloneNode(true));
// 实现每3s切换一个图片
timer = setInterval(auto, 2000);
// 当鼠标移入 定时器停止,移除开启定时器
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(auto, 2000);
}
// 点击小圆点切换图片
for (var i = 0; i < spans.length; i++) {
spans[i].index = i;
spans[i].onclick = function () {
count = this.index - 1;
auto();
}
}
// 左右按钮切换
rightBtn.onclick = function () {
clearInterval(timer);
if (flag) {
flag = false;
auto();
}
}
leftBtn.onclick = function () {
clearInterval(timer);
if (flag) {
if (count == 0) {
count = lis.length;
imgbox.style.left = -count * imgW + 'px';
}
count--;
flag = false;
change();
}
}
// 轮播移动函数
function auto() {
if (count === lis.length) {
count = 0;
imgbox.style.left = 0;
}
count++;
change();
}
// 动态的 图片切换
function change() {
// imgbox.style.left = -(imgW * count) + 'px';
move(imgbox, { left: -(imgW * count) }, function () {
flag = true;
});
// 小圆点的切换
for (var i = 0; i < spans.length; i++) {
// 清空原有样式
spans[i].className = '';
// 给当前图片对应的小圆点 设置样式
if (count === lis.length) {
spans[0].className = 'active';
} else {
spans[count].className = 'active';
}
}
}
</script>
</body>
</html>
其中按钮设置了需要动画播放完成之后,才可以切换下一张图片,这样就可以使播放比较连贯。
这里还只是静态的,后续也可以通过从后端获取图片资源,动态的创建标签和类。然后实现图片轮播。
欢迎一起讨论^_^