版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csdnlinyongsheng/article/details/87633069
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*,
::before,
::after{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
}
body{
font-family:Microsoft YaHei,sans-serif;/*移动端默认的字体*/
font-size: 14px;
color: #333;
}
ol,ul{
list-style: none;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after{
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.layout{
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
position: relative;
}
.banner{
width: 100%;
overflow: hidden;
position: relative;
}
.banner ul:first-child{
width: 1000%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.banner ul:first-child li{
width: 10%;
float: left;
}
.banner ul:first-child li a{
display: block;
width: 100%;
}
.banner ul:first-child li a img{
width: 100%;
display: block;
}
.banner ul:last-child{
position: absolute;
bottom: 6px;
width: 100%;
text-align: center;
}
.banner ul:last-child li{
width: 6px;
height: 6px;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
}
.banner ul:last-child li:first-child{
margin-left: 0;
}
.banner ul:last-child li.now{
background: #fff;
}
</style>
</head>
<body>
<div class="layout">
<div class="banner">
<ul class="clearfix">
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.webp"></a></li>
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.webp"></a></li>
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.webp"></a></li>
<li><a href="#"><img src="images/1.jpg"></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var imageCount = 5;
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");
window.my = {};
var addTransition = function()
{
imageBox.style.transition = "all 0.3s";
imageBox.style.webkitTransition = "all 0.3s";
}
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)";
}
var index = 1;
var timer = setInterval(function(){
index ++;
addTransition();
setTranslateX(-index*width);
}, 2000);
my.transitionEnd = function(dom, callback)
{
if(!dom || typeof dom != "object")
{
return false;
}
dom.addEventListener("transitionEnd", function(){
callback && callback();
});
dom.addEventListener("webkitTransitionEnd", function(){
callback && callback();
})
}
my.transitionEnd(imageBox, function(){
if(index > imageCount)
{
index = 1;
}
else if(index <= 0)
{
index = imageCount;
}
removeTransition();
setTranslateX(-index*width);
setPoint();
});
var setPoint = function()
{
for(var i = 0; i < points.length; i++)
{
points[i].className = "";
}
points[index-1].className = "now";
}
var startX = 0;
var moveX = 0;
var distanceX = 0;
var isMove = false;
imageBox.addEventListener("touchstart", function(e){
clearInterval(timer);
startX = e.touches[0].clientX;
console.log("stargX" + startX);
})
imageBox.addEventListener("touchmove", function(e){
moveX = e.touches[0].clientX;
distanceX = moveX - startX;
removeTransition();
setTranslateX(-index * width + distanceX);
isMove = true;
})
imageBox.addEventListener("touchend", function(e){
if(isMove && Math.abs(distanceX) > width/5)
{
if(distanceX > 0)
{
index --;
}
else
{
index ++;
}
}
addTransition();
setTranslateX(-index * width);
if(index > imageCount)
{
index = 1;
}
else if(index <= 0)
{
index = imageCount;
}
setPoint();
//重置参数
startX = 0;
moveX = 0;
distanceX = 0;
isMove = false;
//加定时器
clearInterval(timer); //严谨 再清除一次定时器
timer= setInterval(function(){
index++ ; //自动轮播到下一张
addTransition(); //加过渡动画
setTranslateX(-index * width); //定位
},3000);
})
</script>
</body>
</html>