移动端如何开发轮播图
注意事项：
1.要做到自适应的效果，就要熟练的运用百分比布局
2.手机端一定会有滑动效果，所有我们如果要做8张图的轮播，就得导入10张图，在第一张图的前面，就得加入最后一张，在最后一张的后面就要加入第一张。
3.写css的时候注意图片的位置，和清除浮动
4.要注意移动端的兼容处理和手势事件的合理运用，把握好图片移动的距离。
废话不多说，直接上代码：
首先准备一个html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>轮播图demo</title>
<style type="text/css">
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
--webkit-box-sizing:border-border-box ;
tap-highlight-color:transparent ;
-webkit-tap-highlight-color: transparent;
}
body{
font-size: 14px;
font-family: "microsoft yahei",sans-serif;
color: #333;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="jd_container">
<div class="jd_banner">
<ul>
<li><a href=""><img src="img10.jpg"></a></li>
<li><a href=""><img src="img100.jpg"></a></li>
<li><a href=""><img src="img101.png"></a></li>
<li><a href=""><img src="img102.jpg"></a></li>
<li><a href=""><img src="img103.png"></a></li>
<li><a href=""><img src="img104.jpg"></a></li>
<li><a href=""><img src="img7.jpg"></a></li>
<li><a href=""><img src="img8.jpg"></a></li>
<li><a href=""><img src="img10.jpg"></a></li>
<li><a href=""><img src="img100.jpg"></a></li>
</ul>
<ul>
<li class="lunbo_now"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</body>
</html>
接着做css样式的，一般来说，轮播图都是初始偏移一个位置的距离，这里运用的都是百分比布局，随着屏幕的变化，图片宽度等比例缩小，不会影响布局变化
.jd_banner{
width: 100%;
position: relative;
overflow: hidden;
}
.jd_banner ul:first-child{
width: 1000%;
height: 200px;
transform: translateX(-10%);
--webkit-transform:translateX(-10%) ;
}
.jd_banner ul:first-child li{
width: 10%;
float: left;
}
.jd_banner ul:first-child li a{
width: 100%;
}
.jd_banner ul:first-child li img{
width: 100%;
height: 200px;
}
.jd_banner ul:last-child{
position: absolute;
left:50%;
margin-left: -59px;
bottom: 6px;
height: 6px;
width: 118px;
}
.jd_banner ul:last-child li{
border: 1px solid #DDDDDD;
border-radius: 50%;
float: left;
margin-left: 10px;
width: 6px;
height: 6px;
}
.jd_banner ul:last-child li:first-child{
margin-left: 0;
}
.jd_banner ul:last-child li.lunbo_now{
background: whitesmoke;
}
最后是js的处理，主要是对移动端的触摸事件的运用，触摸滑动的距离=触摸滑动的距离+图片偏移的距离
var banner = function(){
var index = 1;
var banner = document.querySelector(".jd_banner");
var width = banner.offsetWidth;////返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
var imgBox = document.querySelector("ul:first-child");
var pointBox = document.querySelector("ul:last-child");
var points = pointBox.querySelectorAll("li");
//加过渡
function addTransition(){
imgBox.style.transition = 'all 0.2s';
//css3属性一般都要做兼容设置
imgBox.style.webkitTransition = 'all 0.2s';
}
//清过渡
function clearTransition(){
imgBox.style.transition = 'none';
imgBox.style.webkitTransition = 'none';
}
//做位移
function addTransform(distance){
imgBox.style.transform = 'translateX(' + distance + 'px)';
imgBox.style.webkitTransform = 'translateX(' + distance + 'px)';
}
var timer = setInterval(function(){
index ++;
addTransition();
addTransform(-index*width);
},2000);
//通过监听事件,判断移动的位置,做到移动到最后一张是瞬间定位到第一张
imgBox.addEventListener("transitionend",function(){
if(index >=9){
index = 1;
//清过渡
clearTransition();
//做位移
addTransform(-index*width);
}else if(index <= 0){
index = 8;
//清过渡
clearTransition();
//做位移
addTransform(-index*width);
}
// 设置点的样式变化
setPoint();
});
function setPoint(){
// 遍历每个点
for (var i = 0; i < points.length; i++) {
points[i].classList.remove("lunbo_now");
}
points[index - 1].classList.add("lunbo_now");
}
// 添加手滑动图片事件
var startX = 0;
var distanceX = 0;
var is_move = false;
imgBox.addEventListener("touchstart",function(e){
clearInterval(timer);
startX = e.touches[0].clientX;
});
imgBox.addEventListener("touchmove",function(e){
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
clearTransition();
addTransform(-index*width + distanceX);
is_move = true;
});
imgBox.addEventListener("touchend",function(){
if(is_move){
// 当手指滑动的距离小于图片的1/3，吸附
if(Math.abs(distanceX) < width/3){
addTransition();
addTransform(-index*width)
}else{
if(distanceX >0){
index --;
}else{
index ++;
}
addTransition();
addTransform(-index*width)
}
}
startX = 0;
distanceX = 0;
is_move = false;
clearInterval(timer);
timer = setInterval(function(){
index ++;
addTransition();
addTransform(-index*width);
},2000);
});
}
banner();
以上代码可以直接快速生成一个轮播图，欢迎留言讨论，互相学习互相成长
