旋转木马的实现支持移动端

第一部分是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>

　　

转载于:https://www.cnblogs.com/shentao11023/p/7919021.html