用原生JavaScript实现简单轮播图

标签: JavaScript 轮播图 简单轮播图 原生JS
7人阅读 评论(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="##"><</a>
        <a href="##">></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;
            overflow: hidden;
        }

        #banner > ul {
            position: absolute;
        }

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

        #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: 55px;
            color: #fff;
            text-decoration: none;
            background: rgba(0, 0, 0, .5);
            font-size: 40px;
            top: 170px;
            opacity: 0.5;
            border-radius: 50%;
        }

        #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)
}
 var ul = document.getElementById("banner").getElementsByTagName("ul")[0];
    var aLi = ul.getElementsByTagName("li");
    var iw = aLi[0].offsetWidth;
    var len = aLi.length;
    var aBtn = document.getElementById("btn").getElementsByTagName("a");
    var dir = document.getElementById("direction").getElementsByTagName("a");
    var iNow = 0;
    var timer = null;
    //算ul的宽度
    ul.style.width = iw * len + 'px';

    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 = "";
            }
            this.className = "active";
            move(ul, {left: -(this.index) * iw});
            iNow = this.index;
        }
    }

    //点击左边的按钮的时候
    dir[0].onclick = function () {
        if (iNow == 0) {
            //当iNow为0的时候下次出现的图片应该是length-1
            iNow = len - 1;
        } else {
            iNow--;
        }
        toImg();
    };
    //点击右边的按钮的时候
    dir[1].onclick = function () {
        if (iNow == len - 1) {
            //因为下一次显示要从下标为0的开始
            iNow = 0;
        } else {
            iNow++;
        }
        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 (iNow == len - 1) {
                iNow = 0;
            } else {
                iNow++
            }
            toImg();
        }, 2000)
    }

    //运动原理
    function toImg() {
        move(ul, {left: -iNow * iw});
        for (var i = 0; i < aBtn.length; i++) {
            aBtn[i].className = "";
        }
        aBtn[iNow].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实现最简单的图片轮播

几行的代码实现最为简易的图片轮播效果。 Js部分 var li=document.get...
  • HeyWeCome
  • HeyWeCome
  • 2017-09-15 22:09:01
  • 3013

原生JS-实现无限图片轮播

实现思路:      一、布局部分:                1、采用div>ul>li>img布局,来展示轮播的图片banner;                2、采用div>>ul>...
  • q908555281
  • q908555281
  • 2017-04-21 14:01:46
  • 6000

用原生JS写无缝轮播

琢磨了几个小时终于写出来了,上代码 这是布局结构 > 这是样式 body,ul,ol{ margin: 0; padding: 0; } l...
  • zzzWhite
  • zzzWhite
  • 2017-02-23 23:01:19
  • 2756

JS原生轮播(JS篇)

接着上一篇,我接下来写关于JS的部分,我会按照我当时的思路一步一步的写,在最后附上全部的代码 一开始我打算写最简单的图片切换功能,怎么写呢?当我们点击左右箭头的时候是用改变left的值,有了思路就很...
  • qq_26626113
  • qq_26626113
  • 2015-07-28 11:31:49
  • 6056

原生javascript实现图片自动轮播和点击轮播代码

Document /*重置样式*/ *{margin: 0;padding: 0; list-style: none;} /*wrap的轮播图和切换按钮样式*/ .wrap{hei...
  • sinat_21206105
  • sinat_21206105
  • 2016-08-23 09:56:13
  • 13435

原生js实现焦点轮播图动态切换

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • YuMay2009
  • YuMay2009
  • 2016-06-03 11:07:47
  • 1067

用js实现简单的网页轮播图

Title             .box{             width: 600px;             height: 500px;             overf...
  • wfh_fighting
  • wfh_fighting
  • 2016-10-12 16:08:48
  • 1462

用原生js实现轮播图

用原生js实现最简单的轮播图效果,实现图片切换。
  • Ednah
  • Ednah
  • 2017-08-02 22:39:14
  • 526

原生javascript 轮播图插件

/** * YSlide轮播图插件 * @param {type} config * config.box : 轮播图容器ID (轮播图容器的父ID) * config.n...
  • w826950544
  • w826950544
  • 2014-08-26 17:53:46
  • 1450
    个人资料
    等级:
    访问量: 0
    积分: 181
    排名: 0
    文章分类
    文章存档