前端ABC<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<style type="text/css">
body,dl,h1,h3,h5,h6,hr,p,pre {
margin:0;
}
th,td,input,textarea {
padding:0;
}
ol,ul {
margin:0;
padding:0;
list-style:none;
}
input,button {
-webkit-appearance:none;
}
a {
text-decoration:none;
}
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
/*banner,滚动图*/
.banner {
position:relative;
width:100%;
height:4.1rem;
}
.bannerbox,.bannerindex {
position:absolute;
}
.bannerbox {
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
overflow:hidden;
}
.bannerlist {
position:relative;
width:31rem;
overflow:hidden;
}
.bannerlist a {
float:left;
}
.bannerlist img {
display:block;
width:10rem;
height:4.11rem;
border:none;
}
.bannerindex {
right:0;
bottom:.3rem;
/*width:100%*/;
z-index:2;
font-size:0;
text-align:center;
}
.bannerindex li {
display:inline-block;
margin:0 .16rem;
width:.15rem;
height:.15rem;
border-radius:.2rem;
background-color:#e5e5e5;
}
.bannerindex li.thisindex {
background-color:#6d35cb;
}
.test{
font-size: 0.2rem;
line-height: 0.4rem;
color: #7297FF;
text-align: center;
}
</style>
<!-- 自适应 -->
<script type="text/javascript">
(function (_window) {
// 计算dpr
var navigatorUserAgent = navigator.userAgent;
var iPhone = navigatorUserAgent.indexOf("iPhone");
if (iPhone > -1) {
var dpr = Number(window.devicePixelRatio),
one_dpr = 1 / dpr;
} else {
var dpr = 1,
one_dpr = 1;
}
var writeText = "<meta name=\"viewport\" content=\"width=device-width,initial-scale=" +
one_dpr + ",maximum-scale=" + one_dpr + ",minimum-scale=" + one_dpr + ",user-scalable=no\">\n
<meta name=\"'flexible\" content=\"initial-dpr=" + dpr + "\">";
document.write(writeText);
// 计算字体大小
var html = document.getElementsByTagName("html");
var F0 = 75;
html[0].setAttribute("data-dpr", dpr);
var getFontSize = function getFontSize() {
var windowWidth = window.innerWidth;
html[0].style.fontSize = F0 * windowWidth / 750 + "px";
};
// 初始化
getFontSize();
_window.addEventListener("resize", getFontSize, false);
})(window);
</script>
</head>
<body>
<!--轮播图-->
<div class="banner">
<div id="bannerbox" class="bannerbox">
<div id="bannerlist" class="bannerlist clearfix">
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267189949&di=0574aa7d15bd0e2756f895c082d965c4&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F32%2F22742a569c2dfdba8d4943ab9422b024.jpg"/></a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267224293&di=3733ca596dc466534c438282bc474f0d&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F2f98a6cd604d1e03c9ec4d07db019ff0.jpg"/</a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=798d47938625766187b325c1d7e5bf7c&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F73%2F22f3f0857d23a5beff98ee5d35ae4e5a.jpg"/></a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267237968&di=a0cfeba6d6385d131c9d43da1df92546&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c70757c000b50000012e7e3b1d40.jpg%40900w_1l_2o_100sh.jpg"/></a>
<a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=0625f052fb428dccbadadeea05ccde32&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F197fc7596ea416d86b027e3b945b6e04.jpg"/></a>
</div>
</div>
<ol id="bannerindex" class="bannerindex">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div class="test">banner—swiper</div>
<!--轮播效果-->
<script >
var bannerList = document.getElementById("bannerlist"),
img = bannerList.getElementsByTagName("a"),
bannerIndex = document.getElementById("bannerindex").getElementsByTagName("li"),
bannerBox = document.getElementById("bannerbox"); //touch事件容器
var index = 0,
// 当前索引
maxIndex = img.length - 1,
//最大索引
classname = "thisindex";
var setmain,
// 轮播主体定时器
setframe,
// 连续运动定时器
time = 4000,
// 连续间隔时间
animationIng = 0; // 判断轮播连续运动定时器是否存在
// 速度和单位
var velocit = 0.65;
var metric = "rem";
// touch事件相关函数
var start = {};
start.x = "";
start.right = "";
start.time = "";
var end = {};
end.x = "";
var html = document.getElementsByTagName("html");
// px to rem
var px2rem = function px2rem(px) {
return px / parseFloat(html[0].style.fontSize);
};
// touchstart
var bannerStartFun = function bannerStartFun(event) {
if (animationIng == 0) {
animationIng = 1;
clearTimeout(setmain);
var e = event.touches[0];
start.x = e.pageX;
start.right = parseFloat(bannerList.style.right);
start.time = +new Date();
document.addEventListener("touchmove", bannerMoveFun, false);
document.addEventListener("touchend", bannerEndFun, false);
}
};
// touchmove
var bannerMoveFun = function bannerMoveFun(event) {
event.preventDefault();
var move = function move() {
var e = event.touches[0];
end.x = e.pageX;
var cha = px2rem(end.x - start.x);
bannerList.style.right = start.right - cha + metric;
};
requestAnimationFrame(move);
};
// touchend
var bannerEndFun = function bannerEndFun(event) {
end.time = +new Date();
if (end.time - start.time >= 50) {
var cha = px2rem(end.x - start.x);
if (Math.abs(cha) >= 2) {
cha > 0 ? endFunB() : endFunA();
} else {
endFunC();
}
} else {
endFunC();
}
document.removeEventListener("touchmove", bannerMoveFun);
document.removeEventListener("touchend", bannerEndFun);
};
// touchend判断并执行相应的函数
// 加加函数
var endFunA = function endFunA() {
bannerIndex[index].classList.remove(classname);
index == maxIndex ? index = 0 : index++;
bannerIndex[index].classList.add(classname);
animation(20, function () {
enlargeCallBack();
animationIng = 0;
setmain = setTimeout(main, time);
});
};
// 减减函数
var endFunB = function endFunB() {
bannerIndex[index].classList.remove(classname);
index == 0 ? index = maxIndex : index--;
bannerIndex[index].classList.add(classname);
animation(0, function () {
reduceCallBack();
animationIng = 0;
setmain = setTimeout(main, time);
});
};
// index不变的函数
var endFunC = function endFunC() {
animation(10, function () {
animationIng = 0;
setmain = setTimeout(main, time);
});
};
// index++回调函数
var enlargeCallBack = function enlargeCallBack() {
bannerList.appendChild(img[0]);
bannerList.style.right = "10" + metric;
};
// index--回调函数
var reduceCallBack = function reduceCallBack() {
bannerList.insertBefore(img[maxIndex], img[0]);
bannerList.style.right = "10" + metric;
};
// 动画函数
var animation = function animation(target, callback) {
var v = "";
var start = parseFloat(bannerList.style.right);
start < target ? v = +velocit : v = -velocit;
var frame = function frame() {
var right = parseFloat(bannerList.style.right);
if (Math.abs(target - right) > velocit) {
bannerList.style.right = v + right + metric;
setframe = requestAnimationFrame(frame);
} else {
bannerList.style.right = target + metric;
callback ? callback() : "";
}
};
setframe = requestAnimationFrame(frame);
};
// 轮播主函数
var main = function main() {
animationIng = 1;
bannerIndex[index].classList.remove(classname);
index == maxIndex ? index = 0 : index++;
bannerIndex[index].classList.add(classname);
animation(20, function () {
enlargeCallBack();
animationIng = 0;
setmain = setTimeout(main, time);
});
};
// 初始化
var init = function init() {
bannerList.insertBefore(img[maxIndex], img[0]);
bannerList.style.right = "10" + metric;
bannerIndex[0].classList.add(classname);
bannerBox.addEventListener("touchstart", bannerStartFun, false);
setmain = setTimeout(main, time);
};
init();
</script>
</html>
欢迎分享本文，转载请保留出处：前端ABC » JavaScript简单移动端自适应轮播图