自适应淡入淡出轮播

前端入坑纪 19

最近这段时间一直在做公司自己的项目，忙的不可开交。而且手头上那次给同学定制的网站也被要求 “回炉再造” ，整个人都要不好不好了～

人生的处境可真是够激荡起伏的啊！！！

那么，老规矩，先上截图

效果图

OK，first things first！项目链接

HTML 结构

        
        

            ![壁纸](http://upload-images.jianshu.io/upload_images/4732938-a08f44fb5106cf00.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![壁纸](http://upload-images.jianshu.io/upload_images/4732938-c9d2e9e5d834ac50.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![壁纸](http://upload-images.jianshu.io/upload_images/4732938-032e0972240840bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![壁纸](http://upload-images.jianshu.io/upload_images/4732938-ac690325c464815b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![壁纸](http://upload-images.jianshu.io/upload_images/4732938-aa78d263a7c0bbe9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
        
    

轮播里的标示图片位置的圆点是用JS动态生成的，数量等于图片的数量

CSS 结构

        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
        }
        
        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0
        }
        
        .clearfix::after {
            content: "";
            display: table;
            clear: both
        }
        
         ::-webkit-scrollbar {
            display: none
        }
        
        ul,
        li {
            list-style: none
        }
        
        .swipWrp {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        
        #swiper {
            position: relative;
            padding: 28% 50%;
            overflow: hidden;
        }
        
        #swiper img {
            display: none;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 100%;
            transition: all 300ms linear 60ms;
        }
        
        .arwL,
        .arwR {
            background-color: rgba(255, 255, 255, .5);
            border-radius: 50%;
            display: block;
            position: absolute;
            padding: 3%;
            background-size: 50% auto;
            background-position: center center;
            background-repeat: no-repeat;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9
        }
        
        .arwL {
            left: 0;
            background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/arrowL.png")
        }
        
        .arwR {
            right: 0;
            background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/arrowR.png")
        }
        
        #tags {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }
        
        #tags a {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin: 3px 6px;
            border-radius: 8px;
            background-color: rgba(0, 0, 0, .5)
        }
        
        #tags a.on {
            background-color: rgba(255, 255, 255, .5)
        }

这里轮播自适应的样式，和以前发的轮播是差不多的原理，就不赘述了。

JS 结构

        var swiper = document.getElementById("swiper");
        var imgs = swiper.getElementsByTagName("img");
        var arwL = document.getElementById("arwL");
        var arwR = document.getElementById("arwR");
        var indx = 0;
        var timers = null;
        var nodeFgmt = document.createDocumentFragment();

// 这里是动态添加位置原点的js代码
        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();
            }
        }
// 这里是初始化轮播的3条代码
        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 = ""
            }
        }

// 每隔3.6秒切换轮播图
        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";
          //   console.log("imgs的indx ", indx)
            setTimeout(function() {
                imgs[indx].style.opacity = "1";
                tagsA[indx].className = "on";
             //    console.log("times的indx ", indx)
            }, 30);
        }

// 鼠标滑过时的切换动作函数
        function onEft() {
            scrollIntvel()
          //   console.log("scrolling now  ")
        }

// 鼠标滑出时的切换动作函数
        function offEft() {
            clearInterval(timers);
        //     console.log("stopping now  ")
        }


// 启动轮播效果
        scrollIntvel()

// 鼠标滑入滑出的函数调用
        arwL.onmouseover = offEft;
        arwR.onmouseover = offEft;
        arwL.onmouseout = onEft;
        arwR.onmouseout = onEft;


// 左箭头点击效果
        arwL.onclick = function() {
            hideAll();
            if (indx > 0) {
                indx--;
            } else {
                indx = imgs.length - 1;
            }
            changeEffect(indx);
        }
// 右箭头点击效果
        arwR.onclick = function() {
            hideAll();
            if (indx < imgs.length - 1) {
                indx++;
            } else {
                indx = 0;
            }
            changeEffect(indx);
        }

这会的JS有点多，本来想写的简单点。可是码着码着就变成现在这个样子了。原理和先前文章的也是差不多，有兴趣的小伙伴可以好好研究一番。