javascript之js实现简单的无缝轮播图（可调节方向）
本节介绍简单轮播图的做法，效果为，手机端时，向左有滑动一定的距离后，轮播图移动方向改变
需求分析
- 1 ：实现无缝轮播。即从1-3或者从3-1无限循环
- 2 ：兼容手机端和pc端；主要是手机端
- 3 ：手机端时先左滑动一定距离时轮播图开始向左移动，相反，向右滑动一定距离时轮播图开始向右移动
- 4 ： 响应式布局，适用于各种分辨率
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/* 这里的宽度高度可以动态设置，因为所以的宽度高度都是根据他所设置
所以设置之后，所有的元素大小都会随之改变
*/
#carousel {
position: relative;
left: 0;
right: 0;
top: 100px;
margin: auto;
width: 800px;
height: 500px;
overflow: hidden;
}
.carousel_inner {
position: absolute;
height: 100%;
}
img {
display: block;
float: left;
}
</style>
</head>
<body>
<div id="carousel">
<div class="carousel_inner">
<img src="img/1.png">
<img src="img/2.png">
<img src="img/3.png">
</div>
</div>
<script type="text/javascript">
var carousel = document.getElementById("carousel");
var inner = document.querySelector('.carousel_inner');
var indexTimer = speedTimer = null;
var index = 0; //代表的图片页数,即改变index 就换图片
var speed = -10; //移动的速度
var direction = 'left'; //轮播图初始移动方向
var startX, endX, moveX;
//需要注意的是,下面这句话要写在变量img上面,不能只能读取三个,且图片不能设置宽度高度
// 实现无缝轮播的第一个关键点
inner.innerHTML += inner.innerHTML;
var img = document.querySelectorAll('img');
//以下为动态设置宽度,即实现响应式布局
inner.style.width = carousel.offsetWidth * 6 + 'px';
for (var i = 0; i < img.length; i++) {
img[i].style.width = carousel.offsetWidth + 'px';
img[i].style.height = carousel.offsetHeight + 'px';
}
//在改变分辨率的同时动态设置宽度;
window.addEventListener('resize', function() {
inner.style.width = carousel.offsetWidth * 6 + 'px';
for (var i = 0; i < img.length; i++) {
img[i].style.width = carousel.offsetWidth + 'px';
img[i].style.height = carousel.offsetHeight + 'px';
}
})
//以下代码开始实现轮播图效果
//设置定时器,每几秒换一张图片
indexTimer = setInterval(indexFn, 2000);
//更换图片移动方向,pc端可以mouseup,down代替
//即鼠标向向哪个方向移动一定距离,图片就吵哪个方向移动
inner.addEventListener('touchstart', touchStart)
inner.addEventListener('touchend', touchEnd)
function indexFn() {
// 下面实现无缝轮播的第二个要点
//向左移动时
//当移动到复制图片的第一个图片时(这里是第四个图片，由于是复制 和第一张图片一样)
//下一张图片应该是第五张图片(即第二张照片),所以直接跳转到开头,改变speed的正负即改变方向
//向右移动时
//把复制的所有图片移到左面，呢么当前显示的图片就是滴四张图片(即第一张图片)
//因为是向用移动,呢么下一张图片就是第三种图片
if (direction == 'left') {
speed = -10;
if (index == img.length / 2) {
inner.style.left = 0;
index = 1;
} else {
index++;
}
} else {
speed = 10;
if (index == 0) {
inner.style.left = -inner.offsetWidth / 2 + 'px';
index = 2
} else {
index--;
}
}
moveStart(-index * img[0].offsetWidth)
}
function moveStart(target) {
// console.log(target);
//清除上一次定时器产生的影响
clearInterval(speedTimer);
speedTimer = setInterval(function() {
//这里最好使用绝对值,我用过等于,但缺点是 如果不为整数的话
//呢么这个定时器就会一直执行下去
if (Math.abs(target - inner.offsetLeft) < 10) {
clearInterval(speedTimer);
} else {
inner.style.left = inner.offsetLeft + speed + 'px';
}
}, 10)
}
function touchStart(e) {
startX = e.touches[0].pageX;
}
function touchEnd(e) {
endX = e.changedTouches[0].pageX;
moveX = endX - startX;
if (moveX > 20) {
direction = 'right';
clearInterval(indexTimer)
indexTimer = setInterval(indexFn, 2000);
}
if (moveX < -20) {
direction = 'left';
clearInterval(indexTimer)
indexTimer = setInterval(indexFn, 2000);
}
console.log(direction)
}
</script>
</body>
</html>
