H5轮播图简版

来源：互联网发布：数据透视表取消总计编辑：程序博客网时间：2024/05/22 10:45
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>H5轮播</title>    <style type="text/css">        * { margin: 0; padding: 0; }        .box { position: relative; width: 100%; max-width: 768px; height: 180px; margin: 0 auto; box-sizing: border-box; }        .wrap { position: relative; width: 100%; max-width: 768px; height: 180px; overflow: hidden; }        .content { position: absolute; top: 0; left: 0; width: 100%; max-width: 768px; height: 180px; background: #CCC; line-height: 180px; color: #000; text-align: center; font-size: 100px; z-index: 22; }        .content.cur { z-index: 25; }        .dot { position: absolute; bottom: 15px; left: 0; width: 100%; height: 20px; text-align: center; z-index: 55; }        .dot i { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: #000; border-radius: 50%; }        .dot i.bg { background: red; }    </style></head><body><div class="box">    <div class="wrap" id="slideMain">        <div class="content cur">1</div>        <div class="content">2</div>        <div class="content">3</div>        <div class="content">4</div>        <div class="content">5</div>    </div>    <div class="dot" id="slideItem"><i class="bg"></i><i></i><i></i><i></i><i></i></div></div><script type="text/javascript">    var slideImg = {        initNum: 0,        bgImg: ["activity1/1.jpg", "activity1/2.jpg", "activity1/3.jpg", "activity1/4.jpg", "activity1/5.jpg"],        init: function (opts) {//执行的函数            var opts = opts || {                    slideMain: "slideMain",                    slideItem: "slideItem"                };            this.pageRun(opts);            this.bindEvent(opts);            this.bindBg(opts, slideImg.bgImg);        },        bindBg: function (opts, bgImg) {//给轮播绑定背景图片            var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");            for (var i = 0; i < slideContent.length; i++) {                slideContent[i].style.background = "url(" + bgImg[i] + ") no-repeat center";                slideContent[i].style.backgroundSize = "100%";            }        },        pageRun: function (opts) {//滑过逻辑，计算出initNum索引            var _this = this;            var getxy = {                x: 0,                y: 0            };            var slideMain = document.getElementById(opts.slideMain);            var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");            var moveX = null;            var moveY = null;            if (slideMain) {                slideMain.addEventListener("touchstart", function (e) {                    var e = e || window.event;                    getxy.x = e.changedTouches[0].pageX;                    getxy.y = e.changedTouches[0].pageY;                }, false);                slideMain.addEventListener("touchmove", function (e) {                    var e = e || window.event;                    e.preventDefault();                    moveX = e.changedTouches[0].pageX;                    moveY = e.changedTouches[0].pageY;                }, false);                slideMain.addEventListener("touchend", function (e) {                    var e = e || window.event;                    e.preventDefault();                    moveX = e.changedTouches[0].pageX;                    moveY = e.changedTouches[0].pageY;                    if (moveX - getxy.x > 0) {                        if (Math.abs(moveX - getxy.x) > 50) {                            if (_this.initNum === 0) {                                _this.initNum = slideContent.length - 1;                            } else {                                _this.initNum--;                            }                            _this.eleAnimate(opts, _this.initNum);                        }                    } else {                        if (Math.abs(moveX - getxy.x) > 50) {                            if (_this.initNum === slideContent.length - 1) {                                _this.initNum = 0;                            } else {                                _this.initNum++;                            }                            _this.eleAnimate(opts, _this.initNum);                        }                    }                }, false);            }        },        bindEvent: function (opts) {//点击事件            var _this = this;            var slideItem = document.querySelectorAll("#" + opts.slideItem + " i");            if (slideItem) {                for (var i = 0; i < slideItem.length; i++) {                    slideItem[i].index = i;                    slideItem[i].addEventListener("click", function () {                        var index = this.index;                        _this.initNum = index;                        _this.eleAnimate(opts, index);                    }, false);                }            }        },        eleAnimate: function (opts, items) {//滑过最后一个img返回第一个img事件            var items = items || 0;            var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");            var slideItem = document.querySelectorAll("#" + opts.slideItem + " i");            for (var i = 0; i < slideItem.length; i++) {                slideContent[i].classList.remove('cur');                slideItem[i].classList.remove('bg');            }            slideContent[items].classList.add('cur');            slideItem[items].classList.add('bg');        }    };    document.addEventListener("DOMContentLoaded", function () {        slideImg.init({            slideMain: "slideMain",            slideItem: "slideItem"        })    }, false);</script></body></html>
阅读全文
1 0