<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title>Title</title>
</head>
<style>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color:#f5f5f5 ;
}
.banner{
width: 100%;
position: relative;
overflow: hidden;
}
.banner ul:first-child{
width: 1000%;
transform: translateX(-10%);
-webkit-transform: translateX(-10%);
}
.banner ul li{
float: left;
width: 10%;
}
.banner ul li a{
display: block;
width: 100%;
}
.banner ul li img{
display: block;
width: 100%;
}
.banner ul:last-child{
position: absolute;
width: 118px;
height: 6px;
left: 50%;
margin-left:-59px;
bottom: 6px;
}
.banner ul:last-child li{
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid #fff;
margin-left:10px;
float: left;
}
.banner ul:last-child li:first-child{
margin-left: 0;
}
.banner ul:last-child .now{
background: #fff;
}
</style>
<body>
<!--轮播图-->
<div class="banner">
<ul>
<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
window.onload = function () {
banner();
};
var banner = function () {
/*1. 自动轮播图且无缝 定时器，过渡*/
/*2. 点要随着图片的轮播改变 根据索引切换*/
/*3. 滑动效果 利用touch事件完成*/
/*4. 滑动结束的时候 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡*/
/*5. 滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡*/
/*轮播图*/
var banner = document.querySelector('.banner');
/*屏幕宽度*/
var width = banner.offsetWidth;
/*图片容器*/
var imageBox = banner.querySelector('ul:first-child');
/*点容器*/
var pointBox = banner.querySelector('ul:last-child');
/*所有的点*/
var points = pointBox.querySelectorAll('li');
var addTransition = function () {
imageBox.style.transition = 'all 0.2s';
imageBox.style.webkitTransition = 'all 0.2s';
}
var removeTransition = function () {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
}
var setTranslateX = function (translateX) {
imageBox.style.transform = 'translateX(' + translateX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
}
/*程序的核心 index */
var index = 1;
var timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
/*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
imageBox.addEventListener('transitionend', function () {
/*自动滚动的无缝*/
if (index >= 9) {
index = 1;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*滑动的时候也需要无缝*/
else if (index <= 0) {
index = 8;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*根据索引设置点*/
/*此时此刻 index 的取值范围 1-8（0,8--1,9）*/
/*点索引 index - 1 */
setPoint();
});
/*设置点的方法*/
var setPoint = function () {
/*index 1-8*/
/*清除样式*/
for (var i = 0; i < points.length; i++) {
var obj = points[i];
obj.classList.remove('now');
}
/*给对应的加上样式*/
points[index - 1].classList.add('now');
}
/*绑定事件*/
var startX = 0;
var distanceX = 0;
var isMove = false;
banner.addEventListener('touchstart', function (e) {
/*清除定时器*/
clearInterval(timer);
/*记录起始位置的X坐标*/
startX = e.touches[0].clientX;
});
banner.addEventListener('touchmove', function (e) {
/*记录滑动过程当中的X坐标*/
var moveX = e.touches[0].clientX;
/*计算位移 有正负方向*/
distanceX = moveX - startX;
/*计算目标元素的位移 不用管正负*/
/*元素将要的定位=当前定位+手指移动的距离*/
var translateX = -index * width + distanceX;
/*滑动--->元素随着手指的滑动做位置的改变*/
removeTransition();
setTranslateX(translateX);
isMove = true;
});
banner.addEventListener('touchend', function (e) {
/*4. 5. 实现*/
/*要使用移动的距离*/
if (isMove) {
if (Math.abs(distanceX) < width / 3) {
/*吸附*/
addTransition();
setTranslateX(-index * width);
} else {
/*切换*/
/*右滑动 上一张*/
if (distanceX > 0) {
index--;
}
/*左滑动 下一张*/
else {
index++;
}
/*根据index去动画的移动*/
addTransition();
setTranslateX(-index * width);
}
}
/*最好做一次参数的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定时器*/
clearInterval(timer);
timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 1000);
});
}
</script>
</html>
移动端web轮播图，包括触摸左右滑动切换效果
猜你喜欢
转载自blog.csdn.net/qq_34708564/article/details/89558908
今日推荐
周排行