HTML 代码
- <!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(Windows.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 = Windows.innerWidth;
- HTML[0].style.fontSize = F0 * windowWidth / 750 + "px";
- };
- // 初始化
- getFontSize();
- _window.addEventListener("resize", getFontSize, false);
- })(Windows);
- </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://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/32/22742a569c2dfdba8d4943ab9422b024.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://pic.90sjimg.com/back_pic/00/00/69/40/2f98a6cd604d1e03c9ec4d07db019ff0.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://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/02/73/22f3f0857d23a5beff98ee5d35ae4e5a.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://img.zcool.cn/community/01c70757c000b50000012e7e3b1d40.jpg@900w_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://pic.90sjimg.com/back_pic/00/00/69/40/197fc7596ea416d86b027e3b945b6e04.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>
来源: http://www.qdfuns.com/article/41996/141b6210efb138800c17c2b7fe0b5a0d.html