自适应淡入淡出轮播（添加触摸）

前端入坑纪 28

确切的说，这个算是伪更新了。只是改了几行代码，原谅这拙劣的套路。算是为了让更多人看到，其实很多js的东西，稍微改改就行了，不用特地找一摸一样的效果。当然拉，前提是你必须熟悉改之前的代码。

效果图

OK，first things first！项目链接

HTML 结构

    <div class="swipWrp">
        <div id="swiper">
            ![](http://upload-images.jianshu.io/upload_images/4732938-ad15e96a780c2e91.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![](http://upload-images.jianshu.io/upload_images/4732938-03189dc7ac3bd4fa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![](http://upload-images.jianshu.io/upload_images/4732938-289ad952c7bcf84c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![](http://upload-images.jianshu.io/upload_images/4732938-bcb76626b6649927.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
    </div>

CSS结构

        .swipWrp {
            position: relative;
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
        }
        
        #swiper {
            position: relative;
            overflow: hidden;
            text-align: center;
            background-color: #fff;
        }
        
        #swiper img {
            display: none;
            margin: 0 auto;
            width: 100%;
            transition: all 300ms linear 60ms;
        }
        
        #tags {
            position: absolute;
            bottom: 6px;
            left: 0;
            width: 100%;
            text-align: center;
        }
        
        #tags a {
            display: inline-block;
            transition: all 1s ease;
            width: 12px;
            height: 12px;
            margin: 3px 6px;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, .8)
        }
        
        #tags a.on {
            transform: scale(1.2, 1.2);
            background-color: rgba(255, 255, 255, .5)
        }

JS结构

            var swiper = document.getElementById("swiper");
            var imgs = swiper.getElementsByTagName("img");
            var indx = 0;
            var timers = null;
            var nodeFgmt = document.createDocumentFragment();
            newNode = document.createElement("div");
            newNode.id = "tags";

            for (var i = 0; i < imgs.length; i++) {
                var ond = document.createElement("a");
                ond.href = "javascript:;";
                ond.setAttribute("data-indx", i);
                nodeFgmt.appendChild(ond);
            }
            newNode.appendChild(nodeFgmt);

            swiper.appendChild(newNode);
            var tagsA = document.getElementById("tags").getElementsByTagName("a");

            for (var s = 0; s < tagsA.length; s++) {
                tagsA[s].onmouseover = function() {
                    offEft();
                    hideAll();
                    var indxA = this.getAttribute("data-indx");
                    changeEffect(indxA);
                    this.className = "on"

                }
                tagsA[s].onmouseout = function() {
                    onEft();
                }
            }

            tagsA[0].className = "on";
            imgs[0].style.display = "block";
            imgs[0].style.opacity = "1";

            function hideAll() {
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.display = "none";
                    imgs[i].style.opacity = "0";
                    tagsA[i].className = ""
                }
            }

            function scrollIntvel() {
                timers = setInterval(function() {
                    hideAll();
                    if (indx < imgs.length - 1) {
                        indx++;
                    } else {
                        indx = 0;
                    }
                    changeEffect(indx);
                }, 3600);
            }



            function changeEffect(indx) {
                imgs[indx].style.display = "block";
                setTimeout(function() {
                    imgs[indx].style.opacity = "1";
                    tagsA[indx].className = "on";
                }, 30);
            }


            function onEft() {
                scrollIntvel()
            }

            function offEft() {
                clearInterval(timers);
            }

            scrollIntvel()

            function swiperLeft() {
                hideAll();
                if (indx > 0) {
                    indx--;
                } else {
                    indx = imgs.length - 1;
                }
                changeEffect(indx);
            }

            function swiperRight() {
                hideAll();
                if (indx < imgs.length - 1) {
                    indx++;
                } else {
                    indx = 0;
                }
                changeEffect(indx);
            }


            // 这里的代码和 第26篇幅《左右滑动出按钮&删除效果》类似
            var startX = endX = 0;
            // 触摸开始时，获取触摸开始时的clientX值 ，并暂停轮播的计时
            swiper.addEventListener("touchstart", function(evt) {
                startX = evt.targetTouches[0].clientX;
                offEft();
            });

            // 移动时计算滑动的clientX值
            swiper.addEventListener("touchmove", function(evt) {
                endX = evt.targetTouches[0].clientX;
            });


            // 移动结束时获得滑动的clientX值，判断大小，以便确定左右方向，最后继续开启轮播计时
            swiper.addEventListener("touchend", function(evt) {
                if (endX - startX < 0) {
                    swiperRight()
                } else {
                    swiperLeft()
                }
                onEft()
            });

把变更的js添加了备注，其实这里的代码和原先左右箭头里的代码基本是一样的。

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！