这个手机端banner 是js原生系列，代码量很少，兼容性也非常好，收藏着以后再用
效果图如下
index.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="banner.js"></script>
<title>banner</title>
</head>
<body style="max-width:800px;margin:0 auto">
<!-- banner -->
<div class="im_banner">
<ul class="im_bannerImg">
<li><a href="javascript:;"><img src="./images/l1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l5.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l6.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l7.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="./images/l8.jpg" alt=""></a></li>
</ul>
<ol class="im_bannerList">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- nav -->
</body>
</html>style代码如下：
<style>
html,body,ul,ol,li,img,form,input,p,h3,div,a,span {padding:0;margin:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body {font-family:'微软雅黑',Tahoma,Geneva,Verdana,sans-serif;font-size:13px;color:#666666;}
a,a:hover {color:#666666;text-decoration:none;}
ul,ol {list-style:none;}
input {outline:none;border:none;border:1px solid #ccc;}
.f_left {float:left;}
.f_right {float:right;}
.m_left10 {margin-left:10px;}
.m_right10 {margin-right:10px;}
.m_top10 {margin-top:10px;}
.m_bottom10 {margin-bottom:10px;}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
.im_banner {width:100%;overflow:hidden;position:relative;}
.im_bannerImg {width:800%;position:relative;}
.im_bannerImg > li {width:12.5%;float:left;}
.im_bannerImg > li img {width:100%;display:block;}
.im_bannerList {position:absolute;bottom:2%;left:50%;transform:translate(-50%,0);}
.im_bannerList >li {width:8px;height:8px;border-radius:50%;border:1px solid #fff;float:left;margin:0 5px;}
</style>JS代码如下：
window.onload = function() {
var bannerHeight = document.querySelector(".im_banner").offsetHeight;
var search = document.querySelector(".jd_search");
window.onscroll = function() {
var scrollHeight =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollHeight <= bannerHeight) {
var opacity = scrollHeight / bannerHeight;
search.style.backgroundColor = "rgba(233,35,34," + opacity + ")";
}
};
bannerEffect();
};
function bannerEffect() {
// var bannerWidth = document.querySelector('.im_banner').offsetWidth;
var imgBox = document.querySelector(".im_bannerImg");
var first = imgBox.querySelector("li:first-of-type");
var last = imgBox.querySelector("li:last-of-type");
var circles = document.querySelector(".im_bannerList").querySelectorAll("li");
imgBox.appendChild(first.cloneNode(true));
imgBox.insertBefore(last.cloneNode(true), imgBox.firstChild);
var lis = imgBox.querySelectorAll("li");
// 设置默认偏移的索引,因为前面还有一张,所以是1;
var index = 1;
var count = lis.length;
imgBox.style.width = count * 100 + "%";
for (var i = 0; i < count; i++) {
lis[i].setAttribute('liIndex',i);
lis[i].style.width = 100 / count + "%";
}
imgBox.style.left = -index * 100 + "%";
// 设置自动轮播
var timerId;
function startTime() {
timerId = setInterval(function() {
index++;
imgBox.style.transition = "left 0.3s ease-in-out";
imgBox.style.left = -index * 100 + "%";
setTimeout(function() {
if (index == count - 1) {
index = 1;
imgBox.style.transition = "none";
imgBox.style.left = -index * 100 + "%";
}
}, 500);
}, 2000);
}
startTime();
var setIndicator = function(index){
var indicators = document.querySelector('.im_bannerList').querySelectorAll('li');
for(var i = 0;i<indicators.length;i++){
indicators[i].classList.remove('active');
}
indicators[index-1].classList.add("active");
}
// 手动轮播
var banner = document.querySelector(".im_banner");
var startX, moveX, distanceX;
// var flag = true;
banner.addEventListener("touchstart", function(e) {
// console.log(e.targetTouches[0].target.parentNode.parentNode);
var currentLi = e.targetTouches[0].target.parentNode.parentNode;
var currentLiIndex = currentLi.getAttribute('liIndex');
// console.log(currentLiIndex);
if(currentLiIndex == 9 || currentLiIndex == 0){
return;
}
clearInterval(timerId);
startX = e.targetTouches[0].clientX;
});
banner.addEventListener("touchmove", function(e) {
var currentLi = e.targetTouches[0].target.parentNode.parentNode;
var currentLiIndex = currentLi.getAttribute('liIndex');
// console.log(currentLi);
if(currentLiIndex == 9 || currentLiIndex == 0){
return;
}
clearInterval(timerId);
var bannerWidth = document.querySelector(".im_banner").offsetWidth;
// console.log(e.targetTouches[0]);
moveX = e.targetTouches[0].clientX;
distanceX = moveX - startX;
imgBox.style.transition = "none";
imgBox.style.left = -index * 100 + (distanceX / bannerWidth) * 100 + "%";
});
banner.addEventListener("touchend", function(e) {
// console.log(e.target.parentNode.parentNode);
var currentLi = e.target.parentNode.parentNode;
var currentLiIndex = currentLi.getAttribute('liIndex');
if(currentLiIndex == 9 || currentLiIndex == 0){
return;
}
// console.log(index);
// console.log(e.targetTouches[0]);
clearInterval(timerId);
// console.log(distanceX);
if (Math.abs(distanceX) > 100) {
// flag = false;
if (distanceX > 0) {
index--;
} else {
index++;
}
imgBox.style.transition = "left 0.3s ease-in-out";
imgBox.style.left = -index * 100 + "%";
} else if (Math.abs(distanceX) > 0) {
// flag = false;
imgBox.style.transition = "left 0.3s ease-in-out";
imgBox.style.left = -index * 100 + "%";
}
// setTimeout(function(){
// flag = true;
// },500)
startX = 0;
moveX = 0;
distanceX = 0;
startTime();
});
imgBox.addEventListener("webkitTransitionEnd", function() {
/*如果到了最后一张(count-1)，回到索引1*/
/*如果到了第一张(0)，回到索引count-2*/
if (index >= count - 1) {
index = 1;
/*清除过渡*/
imgBox.style.transition = "none";
/*设置偏移*/
imgBox.style.left = -index * 100 + "%";
} else if (index <= 0) {
index = count - 2;
/*清除过渡*/
imgBox.style.transition = "none";
/*设置偏移*/
imgBox.style.left = -index * 100 + "%";
}
setIndicator(index);
});
}