<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial- scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Mobile carousel</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
-webkit -box-sizing: border-box;
box-sizing: border-box;
}
/* Disable Safari's automatic font size adjustment in iPhone */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size -adjust: 100%;
/* set the font size to 100px */
font-size: 100px;
}
html ,body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
input {
-webkit-appearance: none;
resize: none;
}
.jd-banner {
width: 100%;
overflow: hidden;
position: relative;
max-width: 7.5rem;
margin: 0 auto;
}
.jd-banner ul:first-child {
width: 1000%;
overflow: hidden;
/*显示*/
transform: translateX(-10%);
-webkit-transform: translateX(-10%);
}
.jd-banner ul:first-child li {
width: 10%;
float: left;
}
.jd-banner ul:first-child li img {
width: 100%;
display: block;
}
/* 小圆点 */
.jd-banner ul:last-child {
width: 1.4rem;
height: .1rem;
position: absolute;
left: 50%;
margin-left: -.6rem;
bottom: .1rem;
}
.jd-banner ul:last-child li {
width: .1rem;
height: .1rem;
margin-left: .08rem;
border-radius: .05rem;
border: 1px solid #fff;
float: left;
}
.jd-banner ul:last-child li:first-child {
margin-left: 0;
}
.jd-banner ul:last-child li.on {
background: #fff;
}
</style>
</head>
<body>
<div class="jd-banner">
<ul>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/2-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img63.ddimg.cn/upload_img/00698/123/3-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/4-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img63.ddimg.cn/upload_img/00698/123/5-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img60.ddimg.cn/upload_img/00698/123/6-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/7-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
</a>
</li>
</ul>
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script src="swipe.js"></script>
<script>
/*carousel*/
var scrollPic = function() {
// banner
var banner = document .getElementsByClassName("jd-banner")[0];
// The width of the picture
var width = banner.offsetWidth;
//The picture box
var imgBox = banner.getElementsByTagName("ul")[0];
//The small dot box
var pointBox = banner.getElementsByTagName("ul")[1];
//point array
var pointList = pointBox.getElementsByTagName("li");
var index = 1;
var timer;
var startX = 0;
var moveX = 0;
var endX = 0;
//Define a transition function
var addTransition = function() {
imgBox.style.transition = "all .3s ease 0s";
imgBox.style.webkitTransition = "all .3s ease 0s";
}
//去掉过渡函数
var removeTransition = function() {
imgBox.style.transition = "none";
imgBox.style.webkitTransition = "none";
}
//改变位置
var setTransform = function(t) {
imgBox.style.transform = "translate(" + t + "px)";
imgBox.style.webkitTransform = "translate(" + t + "px)";
}
//小圆点变化
var setpoint = function(n) {
for(var i = 0; i < pointList.length; i++) {
pointList[i].className = '';
};
if(n >= 9) {
n = 1;
} else if(n <= 0) {
n = 8;
}
pointList[n - 1].className = 'on';
}
//定时器
timer = setInterval(function() {
index++;
addTransition();
setTransform(-index * width);
setpoint(index);
}, 3000)
//监听函数
imgBox.addEventListener('transitionEnd', function() {
if(index >= 9) {
index = 1;
} else if(index <= 0) {
index = 8;
}
removeTransition();
setTransform(-index * width);
}, 300)
imgBox.addEventListener('webkitTransitionEnd', function() {
if(index >= 9) {
index = 1;
} else if(index <= 0) {
index = 8;
}
removeTransition();
setTransform(-index * width);
}, 300)
//touch event start
imgBox.addEventListener('touchstart', function(e) {
//console.log('strat');
// record start position
startX = e.touches[0].clientX;
})
//touch sliding event start
imgBox.addEventListener('touchmove', function(e) {
//clear timer
clearInterval(timer);
// Clear the default scroll event
e.preventDefault();
// record starting position
endX = e.touches[0].clientX;
// record moving position
moveX = startX - endX;
removeTransition();
setTransform(-index * width - moveX)
})
//The end of the touch sliding event
imgBox.addEventListener('touchend', function(e) {
//If the moving distance of the heavy rain is one-third
if(Math.abs(moveX) > (1 / 3 * width) && endX != 0) {
// left
if(moveX > 0) {
index++;
} else {
index--;
}
// change position
setTransform(-index * width);
setpoint(index);
}
// return to original position
addTransition();
setTransform( -index * width);
startX = 0;
endX = 0;
clearInterval(timer);
//timer
timer = setInterval(function() {
index++;
addTransition();
setTransform(-index * width);
setpoint(index);
}, 3000)
})
}
scrollPic();
</script>
Mobile js carousel
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325216346&siteId=291194637
Ranking