zoukankan      html  css  js  c++  java
  • 旋转木马的实现支持移动端

    第一部分是HTML部分,外层父元素用相对定位,子元素用绝对定位,通过改变top,left值改变他们的位置。
    <div class="carousel">
            <div class="img1">
                <img src="images/f1.jpg" />
                <p>旋转木马1</p>
            </div>
            <div class="img2">
                <img src="images/f2.jpg" />
                <p>旋转木马2</p>
            </div>
            <div class="img3">
                <img src="images/f3.jpg" />
                <p>旋转木马3</p>
            </div>
            <div class="img4">
                <img src="images/f4.jpg" />
                <p>旋转木马4</p>
            </div>
            <div class="img5">
                <img src="images/f5.jpg" />
                <p>旋转木马5</p>
            </div>
            <p class="prev"><img src="images/arrow1.png" alt="arrow"/></p>
            <p class="next"><img src="images/arrow2.png" alt="arrow"/></p>
    </div>

    第二部分就是就是代码的实现

    <script>
                //1.申明变量,保存获取的dom节点,定时器还有是否开启触摸。
                var carousel = document.getElementsByClassName("carousel")[0];
                var aitem = carousel.getElementsByTagName("div");
                var prev = document.getElementsByClassName("prev")[0];
                var next = document.getElementsByClassName("next")[0];
                var autoplay = true;
                var timer;
                if (autoplay == true) {
                    timer = setInterval(left, 3000)
                }
                function right() {
                    var fn = new Array(); //创建一个新的数组
                    for (var i = 0; i < aitem.length; i++) {
                        fn.push(aitem[i].className) //遍历每个li的class类名,保存到一个新的数组里面
                    }
                    for (var j = 0; j < aitem.length; j++) {
                        if (j == aitem.length - 1) {
                            aitem[j].className = fn[0];
                        }
                        else {
                            aitem[j].className = fn[j + 1];//向右切换时,遍历每个li,改变他们的class类名,逻辑上每个li的类名要变成原来类名的上一个,最后一个变成第一个类名
                        }
                    }
                }
                function left() {
                    var fn = new Array();//创建一个新的数组
                    for (var i = 0; i < aitem.length; i++) {
                        fn.push(aitem[i].className) //遍历每个li的class类名,保存到一个新的数组里面
                    }
                    for (var j = 0; j < aitem.length; j++) {
                        if (j == 0) {
                            aitem[0].className = fn[aitem.length - 1];
                        }
                        else {
                            aitem[j].className = fn[j - 1];//向右切换时,遍历每个li,改变他们的class类名,逻辑上每个li的类名要变成原来类名的上一个,第一个变成最后一个类名
                        }
                    }
                }
                prev.onclick = function () {
                    right(); //执行向右切换
                }
                next.onclick = function () {
                    left();//执行向左切换
                }
                function touch() {
                    var startx, movex;
                    //绑定触摸的监听事件
                    carousel.addEventListener("touchstart", touchstart, false);
                    carousel.addEventListener("touchmove", touchmove, false);
                    carousel.addEventListener("touchend", touchend, false);
                    function touchstart(e) {
                        clearInterval(timer)
                        sartx = e.changedTouches[0].clientX;//获取触摸开始时的x坐标
                    }
                    function touchmove(e) {
                        movex = e.changedTouches[0].clientX - sartx; //获取触摸结束时手指移动的距离
                    }
    
                    //判断手指移动的距离,执行向右切换或者向左切换
                    function touchend() {
                        if (movex > 100) {
                            right()
                        }
                        if (movex < -100) {
                            left()
                        }
                        timer = setInterval(left, 3000)
                    }
                }
                touch()
    
            </script>
    

      

  • 相关阅读:
    HttpWatch--time chart分析
    HttpWatch--简介及使用技巧
    HTTP 方法:GET 对比 POST
    各个浏览器/服务器URL最大长度限制
    DB2 SQL方式查看版本
    PowerDesign 使用 用户自定义字段类型 domain 后 生成物理模型图 生成的sql脚本 类型 替换问题
    cordova添加android平台时选择安装版本: requirements check failed for jdk 1.8
    java was started but returned exit code=1
    java pdf 导出方案
    nginx tomcat https配置方案
  • 原文地址:https://www.cnblogs.com/shentao11023/p/7919021.html
Copyright © 2011-2022 走看看