用原生JavaScript实现无缝轮播

标签: JavaScript 原生JS 轮播图 无缝轮播
11人阅读 评论(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 aBtn = document.getElementById("btn").getElementsByTagName("a");
    var dir = document.getElementById("direction").getElementsByTagName("a");
    var iNow = 0;
    var timer = null;

    //首先复制一张图片放在ul的最后面
    var li = aLi[0].cloneNode(true);
    ul.appendChild(li);
    //算ul的宽度
    ul.style.width = aLi.length * iw + '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-2
            iNow = aLi.length - 2;
            //为了不出现回啦的感觉 我们让ul的left值为 length-1*iw的宽度
            ul.style.left = -(aLi.length - 1) * iw + 'px';
        } else {
            iNow--;
        }

        toImg();
    };
    //点击右边的按钮的时候
    dir[1].onclick = function () {
        if (iNow == aLi.length - 1) {
            //因为下一次显示要从下标为1的开始
            iNow = 1;
            //为了不出现回啦的那种感觉 我们瞬间让ul的left值为0
            ul.style.left = 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 == aLi.length - 1) {
                //因为下一次显示要从下标为1的开始
                iNow = 1;
                //为了不出现回啦的那种感觉 我们瞬间让ul的left值为0
                ul.style.left = 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 == aLi.length - 1 ? 0 : iNow].className = "active";
    }
查看评论

用原生JS写无缝轮播

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

纯js实现无缝轮播图

很多时候我们都会用到无缝轮播图,那么下面我就把无缝轮播献给大家 1.左右无缝轮播 图片左右无缝滚动的效果 ...
  • ZYY88886666
  • ZYY88886666
  • 2017-02-21 16:59:12
  • 2320

原生js向右无缝轮播

  • 2017年03月14日 10:21
  • 220KB
  • 下载

JS原生代码实现图片轮播无缝切换的一种思路

JS实现图片轮播是个老生常谈的问题,也是新手的必由之路,在这里提供一种思路,供大家参考: 1.生成DIV做外框,并设置overflow:hidden;  // 每个方法都必须有的 2.创建一个数组ar...
  • hnxieyi
  • hnxieyi
  • 2016-05-02 23:27:33
  • 12883

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

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

使用jQuery实现无缝轮播图

轮播图我们很常见的功能,可以使用原生的js进行实现,也可以使用jQuery进行实现,还可以使用H5C3进行实现,当然也可以使用swiper插件很方便的实现,这里先用jQuery实现一个无缝的轮播。 思...
  • k491022087
  • k491022087
  • 2017-01-04 21:01:43
  • 3057

js实现图片无缝向左轮播

*{margin: 0;padding: 0;} ul, li{list-style: none;} .js-mask{wi...
  • sweetllh
  • sweetllh
  • 2017-04-20 22:21:39
  • 827

js实现文字无缝轮播

所用到的知识点: innerHTML 获取或设置某个对象的内容 scrollTop 滚动条滚动的距离,此属性是系统内置定义好的 offsetHeight 获取或设置对象的高度 setInt...
  • weixin_41016545
  • weixin_41016545
  • 2017-11-11 10:32:42
  • 453

js实现轮播图原理及示例

网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式: div+css代码 ...
  • diligentkong
  • diligentkong
  • 2017-02-15 15:06:01
  • 23527

jquery自动无缝轮播代码

jquery自动无缝轮播代码 css样式 body里的布局 jquery的代码 1. css样式*{margin:0px auto;padding:0px;} ul{list-style: none;...
  • wangbei85
  • wangbei85
  • 2016-10-16 18:12:57
  • 1151
    个人资料
    等级:
    访问量: 0
    积分: 181
    排名: 0
    文章分类
    文章存档