zoukankan      html  css  js  c++  java
  • 陪玩游戏系统开发,轮播图实现方法

    本文章介绍的是在陪玩游戏系统开发中,无缝隙轮播图实现的原理,最终需要实现的效果是在陪玩游戏系统中无缝隙无限滑动,可以自定义轮播的速度,支持手势左右滑动,带给用户更好的使用效果。

    HTML部分

       <div class="outer" id="oneTest">
            <div class="inner">
                <div class="goIndex item" goUrl="https://www.baidu.com"
                     style="background-image:url(1.jpg)"></div>
                <div class="goIndex item" goUrl="https://www.baidu.com"
                     style="background-image:url(2.jpg)"></div>
                <div class="goIndex item" goUrl="https://www.baidu.com"
                     style="background-image:url(3.jpg)"></div>
            </div>
            <ul class="num"></ul>
        </div>
    

    陪玩游戏系统轮播图的html就是这样,我们配合着css来看,接下来上css。

    Css部分

     * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .outer {
            margin: 0 auto;
             100%;
            height: 150px;
            overflow: hidden;
            position: relative;
        }
        .inner {
            height: 150px;
            overflow: hidden;
             8000px;
        }
        .inner .goIndex {
            float: left;
            height: 150px;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
        }
        .num {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20%;
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
        }
        .num li {
            margin: 0 3px;
             8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(0, 0, 0, .2);
        }
        .num li.select {
            background: rgba(0, 0, 0, .7);
        }
    

    我们通过css可以看到,.outer为最外层的壳,超出的部分都会隐藏,.inner为一个很长很长的容器,而item为单个item。结构比较简单。ul就是小的控制点了,但陪玩游戏系统没有点击小点的功能。

    页面中Js部分

        //function dGun(obj = {})   这是dGun.js的主函数
        // 初始化两个图片轮播
        dGun({id:"oneTest",time:10000});
        dGun({id:"twoTest",time:4000});
        // 点击后跳转
        var goList = document.getElementsByClassName("goIndex");
        for (var i = 0; i < goList.length; i++) {
            goList[i].addEventListener("click", function () {
                window.location = this.getAttribute("goUrl")
            })
        }
    

    dGun()就是初始化轮播图我们需要传入参数,第一个参数id为.outer盒子的id,第二个为自动切换时间。下面的是陪玩游戏系统中简单的点击跳转功能。

    dGun.js 初始化部分

         //function dGun(obj = {}) 包裹全部dGun内代码
        var id = obj.id;                                           //获取domid
        var time = obj.time ? parseInt(obj.time) : 3000;           //默认3s
        time = time > 300 ? time : 1000;                           //间隔必须大于300
        var _width = document.querySelector("#"+id).offsetWidth;   //获取轮播图宽度
        var _index = 0;                                             //当前是第几个轮播 从-1开始
        var inner = document.querySelector("#"+id+" .inner");               //获取轮播内容外壳(很长的那个)
        var items = document.querySelectorAll("#"+id+" .item");             //获取轮播元素
    
        // 将第一个元素复制到最后,将最后的元素复制到开头
        var firstItem = items[0];
        var lastItem = items[items.length-1];
        inner.insertBefore(lastItem.cloneNode(true),firstItem);
        inner.appendChild(firstItem.cloneNode(true));
        inner.style.transform = "translateX(-"+_width+"px)";
        // 生成底部小圆点
        var imgLength = document.querySelector("#"+id+" .inner").children.length-2;
        var makeCir = '<li class="select"></li>';
        for (var i = 0; i < imgLength - 1; i++) {
            makeCir += '<li></li>';
        }
        document.querySelector("#"+id+" .num" ).innerHTML = makeCir;
        //设置轮播的宽度。
        var newItems = document.querySelectorAll("#"+id+" .item");
        for(var i = 0; i<newItems.length;i++){
            newItems[i].style.width = _width+"px";
        }
    

    前几行代码就不多介绍了,就是获取dom,获取宽度。
    这里说一下将第一个元素复制到最后,将最后的元素复制到开头,这是陪玩游戏系统实现无缝隙轮播的关键,比如我们有3张图片1/2/3进行轮播,这样我们就需要将dom节点变为3/1/2/3/1,为什么这样做呢,轮播图原理是多个item并列,我们通过translateX进行值的改变显示不同区域,我们先将dom节点变为3/1/2/3/1,然后通过inner.style.transform = “translateX(-”+_width+“px)”;这句代码将初始化轮播显示区域放到1这个图片上。然后人们向右滑动,滑动到3的时候,再向右滑应该显示1,而我们dom节点中3的右边就是1,这样向右滑动到末尾1的时候我们快速通过translateX移动到开头1的位置来实现陪玩游戏系统的无缝隙轮播。

    手势滑动实现

        var startX = 0, changedX = 0, originX = 0, basKey = 0;
        //手指点击的X位置    滑动改变X的位置    inner的translateX的值    basKey是个钥匙
    
        function Broadcast() {
            var that = this;
            this.box = document.querySelector("#"+id+" .inner");
            this.box.addEventListener("touchstart", function (ev) {
                that.fnStart(ev);
            })
        }
    
        // 轮播手指按下
        Broadcast.prototype.fnStart = function (ev) {
            clearInterval(autoPlay);          //手指按下的时候清除定时轮播
            if (!basKey) {
                var that = this;
                startX = ev.targetTouches[0].clientX;
                var tempArr = window.getComputedStyle(inner).transform.split(",");
                //获取当前偏移量
                if (tempArr.length > 2) {
                    originX = parseInt(tempArr[tempArr.length - 2]) || 0;
                }
                this.box.ontouchmove = function (ev) {
                    that.fnMove(ev)
                }
                this.box.ontouchend = function (ev) {
                    that.fnEnd(ev)
                }
            }
        };
        // 轮播手指移动
        Broadcast.prototype.fnMove = function (ev) {
            ev.preventDefault();
            changedX = ev.touches[0].clientX - startX;
            var changNum = (originX + changedX);
            this.box.style.cssText = "transform: translateX(" + changNum + "px);";
        };
        // 轮播手指抬起
        Broadcast.prototype.fnEnd = function (ev) {
            // 移除底部按钮样式
            document.querySelector("#"+id+" .select").classList.remove("select");
            basKey = 1;
            setTimeout(function () {
                basKey = 0;
            }, 300)
            if (changedX >= 100) {                   //向某一方向滑动
                var _end = (originX + _width);
                this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
                _index--;
                if (_index == -1) {                //滑动到第一个了,为了实现无缝隙,滚到最后去
                    document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
                    play(-1);
                }
            } else if (changedX < -100) {         //向负的某一方向滑动
                var _end = (originX - _width);
                this.box.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
                _index++;
                if (_index == imgLength) {       //滑到最后一个了,为了实现无缝隙,滚到前面去
                    play(imgLength);
                    document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
                }
            } else {                          //滑动距离太短,没吃饭不用管
                this.box.style.cssText = "transform: translateX(" + originX + "px);transition:all .3s";
            }
            // 完成一次滑动初始化值
            startX = 0;
            changedX = 0;
            originX = 0;
            if (_index != -1 && _index != imgLength) {
                document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
            }
            this.box.ontouchmove = null;            //清除事件
            this.box.ontouchend = null;             //清除绑定事件
            autoPlay = setInterval(lunbo, time)      //开启轮播
        }
    

    我们定义Broadcast方法监听用户的触屏按下事件
    当手指按下时,我们记录手指按下的X轴位置,单后进行监听移动和抬起的事件。
    在陪玩游戏系统开发时,手指移动的时候我们要做到就是计算偏移量,并通过偏移量改变inner的位置。
    手指抬起时,我们查看偏移量十分大于100,这个值可以改,也可以改一下变成传参。通过正负判断方向,并通过index判断当前是第几个,如果是滑动到我们复制的第一个和最后一个节点,则执行play函数,我们接下来讲解。然后改变控制点样式就比较简单了,最后初始化值,并清除监听事件。

    play函数,快速滚

        //首尾无缝连接
        function play(index) {
            setTimeout(function () {
                inner.style.transition = 'all 0s';
                if (index == -1) {
                    var _number = -imgLength * _width;
                    inner.style.transform = 'translateX(' + _number + 'px)';
                    _index = imgLength - 1;
                } else if (index == imgLength) {
                    inner.style.transform = 'translateX(-' + _width + 'px)';
                    _index = 0;
                }
            }, 250);
        }
    

    原理就是在图片滑动完成的时候,快速设置滑动变化时间设为0,并改变translateX到应该去的位置。

    陪玩游戏系统实现定时切换图片

        function lunbo(){
            document.querySelector("#"+id+" .select").classList.remove("select");
            var tempArr = window.getComputedStyle(inner).transform.split(",");
            if (tempArr.length > 2) {
                originX = parseInt(tempArr[tempArr.length - 2]) || 0;
            }
            var _end = (originX - _width);
            inner.style.cssText = "transform: translateX(" + _end + "px);transition:all .3s";
            _index++;
            if (_index != -1 && _index != imgLength) {
                document.querySelectorAll("#"+id+" .num>li")[_index].classList.add("select");
            }else if(_index == -1 ){
                document.querySelectorAll("#"+id+" .num>li")[imgLength - 1].classList.add("select");
            } else if (_index == imgLength) {
                play(imgLength);
                document.querySelectorAll("#"+id+" .num>li")[0].classList.add("select");
            }
        }
        // 初始化轮播
        var autoPlay = setInterval(lunbo,time);       //开启轮播
        var _Broadcast = new Broadcast();             //实例触摸
    

    这个就是开启个定时器,过固定的时间偏移inner的X,并根据是第几个来判断是否要执行play函数。
    以上就是“陪玩游戏系统开发,轮播图实现方法”的全部内容,希望对大家有帮助。
    本文转载自网络,转载仅为分享干货知识,如有侵权欢迎联系云豹科技进行删除处理
    原文链接:https://segmentfault.com/a/1190000016733609?utm_source=sf-similar-article

  • 相关阅读:
    14.4.9 Configuring Spin Lock Polling 配置Spin lock 轮询:
    14.4.8 Configuring the InnoDB Master Thread IO Rate 配置InnoDB Master Thread I/O Rate
    14.4.7 Configuring the Number of Background InnoDB IO Threads 配置 后台InnoDB IO Threads的数量
    14.4.7 Configuring the Number of Background InnoDB IO Threads 配置 后台InnoDB IO Threads的数量
    14.4.6 Configuring Thread Concurrency for InnoDB 配置Thread 并发
    14.4.6 Configuring Thread Concurrency for InnoDB 配置Thread 并发
    14.4.5 Configuring InnoDB Change Buffering 配置InnoDB Change Buffering
    14.4.5 Configuring InnoDB Change Buffering 配置InnoDB Change Buffering
    14.4.4 Configuring the Memory Allocator for InnoDB InnoDB 配置内存分配器
    14.4.4 Configuring the Memory Allocator for InnoDB InnoDB 配置内存分配器
  • 原文地址:https://www.cnblogs.com/yunbao/p/14991045.html
Copyright © 2011-2022 走看看