用原生JavaScript实现淡入淡出轮播图

标签: JavaScript 原生JS 轮播图 淡入淡出轮播图
35人阅读 评论(0) 收藏 举报
分类:

html代码

<div id="banner">
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <div id="direction">
        <a href="##"><i class="iconfont icon-xiangzuo"></i></a>
        <a href="##"><i class="iconfont icon-xiangyou"></i></a>
    </div>
    <div id="btn">
        <a href="##" class="active"></a>
        <a href="##"></a>
        <a href="##"></a>
        <a href="##"></a>
    </div>
</div>

css代码

  * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #banner {
            width: 800px;
            height: 400px;
            margin: 40px auto;
            position: relative;
        }

        #banner > ul > li {
            position: absolute;
            opacity: 0;
            filter: alpha(opacity:0);
        }

        #banner > ul > li:nth-child(1) {
            opacity: 1;
            filter: alpha(opacity:100);
        }

        #banner > ul > li > img {
            width: 800px;
            height: 400px;
        }

        #direction {
            position: relative;
            display: none;
        }

        #direction > a {
            position: absolute;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            text-decoration: none;
            background: rgba(0, 0, 0, .5);
            /*font-size: 40px;*/
            top: 170px;
            opacity: 0.5;
            border-radius: 50%;
        }

        #direction > a > i {
            font-size: 25px;
        }

        #direction > a:nth-child(2) {
            right: 0;
        }

        #btn {
            position: absolute;
            bottom: 0;
            left: 340px;
        }

        #btn > a {
            float: left;
            margin-left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f40;
        }

        #btn > .active {
            background: #fff;
        }

JS代码

封装运动框架

// 完美运动框架
function move(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
            //先判断是否是透明度
            var iCur;
            if (attr == "opacity") {
                iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                iCur = parseInt(getStyle(obj, attr));
            }
            //算速度
            var speed = (json[attr] - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (json[attr] != iCur) {
                bStop = false;
            }
            if (attr == "opacity") {
                obj.style.opacity = (iCur + speed) / 100;
                obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")"
            } else {
                obj.style[attr] = iCur + speed + 'px';
            }
        }
        if (bStop) {
            clearInterval(obj.timer);
            fn && fn();
        }
    }, 30)
}

 /*
        1、分析布局:
            定位布局
            li的透明度不断变化

        2、分析逻辑
                var iNow:隐藏   Next:显示

        6个li
        0 1 2 3 4 5


        下标     透明度      其他

         0        100          0

         1        100        下标为0的li变成了0

         2        100         下标为1的li变成0

         3        100       下标为2的li变成0



        var iNow =0  Next = 0;

        li[next] = 显示
            0
        iNOW = next
        li[inow] = 隐藏
        Next++

        li[next] = 显示
            1
        inow = next;
        li[iNow] = 隐藏
        Next++

        li[next] = 显示
            2
     */
    var banner = document.getElementById("banner");
    var direction = document.getElementById("direction");
    var aLi = document.querySelectorAll("#banner>ul>li");
    var dir = document.querySelectorAll("#direction>a");
    var aBtn = document.querySelectorAll("#btn>a");
    var iNow = 0, Next = 0;
    var timer = null;

    for (var i = 0; i < aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function () {
            for (var j = 0; j < aBtn.length; j++) {
                aBtn[j].className = "";
                move(aLi[j], {opacity: 0});
            }
            this.className = "active";
            //移入的时候让当前这个li显示
            move(aLi[this.index], {opacity: 100});
            //因为next与this.index不是同一个东西 因此需要他们两个同步
            Next = this.index;
            iNow = Next;
        }
    }

    //点击左边的按钮
    dir[0].onclick = function () {
        if (Next == 0) {
            Next = aLi.length - 1;
        } else {
            Next--;
        }

        toImg();
    };

    //点击右边的按钮
    dir[1].onclick = function () {
        if (Next == aLi.length - 1) {
            Next = 0;
        } else {
            Next++;
        }
        toImg()
    };

    //移入的时候变亮
    dir[0].onmouseover = function () {
        this.style.opacity = "1";
    };
    dir[1].onmouseover = function () {
        this.style.opacity = "1";
    };
    //移出的时候变暗
    dir[0].onmouseout = function () {
        this.style.opacity = "0.5";
    };
    dir[1].onmouseout = function () {
        this.style.opacity = "0.5";
    };

    //移入的时候轮播停止
    banner.onmouseover = function () {
        clearInterval(timer);
        direction.style.display = "block";
    };
    //移出的时候轮播继续
    banner.onmouseout = function () {
        autoPlay();
        direction.style.display = "none";
    };

    autoPlay();

    //自动轮播
    function autoPlay() {
        timer = setInterval(function () {
            if (Next == aLi.length - 1) {
                Next = 0;
            } else {
                Next++;
            }
            toImg()
        }, 2000)
    }

    //运动原理
    function toImg() {
        move(aLi[iNow], {opacity: 0});
        move(aLi[Next], {opacity: 100});
        iNow = Next;
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = "";
        }
        aBtn[Next].className = "active";
    }
查看评论

用原生JavaScript实现淡入淡出轮播图

html代码&amp;lt;div id=&quot;banner&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;&am...
  • chengliang666
  • chengliang666
  • 2018-04-17 19:47:39
  • 35

用原生JavaScript实现简单轮播图

html代码&amp;lt;div id=&quot;banner&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;&am...
  • chengliang666
  • chengliang666
  • 2018-04-17 19:34:44
  • 8

用原生JavaScript实现无缝轮播

html代码&amp;lt;div id=&quot;banner&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;&am...
  • chengliang666
  • chengliang666
  • 2018-04-17 19:44:06
  • 11

原生js写淡入淡出轮播(点击按钮)

原生js写淡入淡出轮播(点击按钮)
  • zmooooo
  • zmooooo
  • 2017-12-12 10:36:20
  • 45

透明轮播原生JavaScript实现

html代码&amp;lt;div id=&quot;box&quot;&amp;gt; &amp;lt;ul id=&quot;ul&quot;&amp;gt; &amp;l...
  • chengliang666
  • chengliang666
  • 2018-04-17 20:46:07
  • 19

js实现淡入淡出轮播图

1.图片淡入淡出自动轮播. 2.可以用按钮控制轮播. 效果图: 代码如下: html+scc:*{ margin: 0; padding: ...
  • mr_fzz
  • mr_fzz
  • 2016-11-23 21:07:02
  • 1581

原生js实现fadein 和 fadeout淡入淡出效果

用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。 注...
  • hellochenlu
  • hellochenlu
  • 2016-09-17 11:29:05
  • 4410

简单轮播图3(淡入淡出)

html部分 轮播图淡入淡出
  • cainiao_xiao_bai
  • cainiao_xiao_bai
  • 2017-09-05 21:34:53
  • 76

原生JS实现图片轮播与淡入

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js。然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长,希望自己在...
  • zerlinda_c
  • zerlinda_c
  • 2015-12-14 19:31:52
  • 5029
    个人资料
    等级:
    访问量: 0
    积分: 181
    排名: 0
    文章分类
    文章存档