码迷,mamicode.com
首页 > Web开发 > 详细

原生JS实现简易轮播图

时间:2019-01-18 17:25:02      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:样式   style   nts   效果   tab   window   为什么   分享   渐变   

原生JS实现简易轮播图(渐变?)

最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊。。哈~。。

window.onload = function() {
    var tab = 0;
    var loop_imgs = new Array("img/l1.jpg", "img/l2.jpg", "img/l3.jpg", "img/l4.jpg", "img/l5.jpg", "img/l6.jpg", "img/l7.jpg", "img/l8.jpg");
    //设置时间间隙
    var loopTimer = setInterval(function() {
        goNext();
    }, 2000);

    function goNext() {
        if(tab + 1 >= loop_imgs.length) {
            tab = 0;
        } else {
            tab++;
        }
        document.getElementsByClassName("top_img")[0].style.backgroundImage = "url(" + loop_imgs[tab] + ")";
    }
}

再加上下面的css样式,就可以让图片转换的时候不会那么的生硬,有种渐变的效果...

transition: background-image .8s ease-in-out;

技术分享图片

对了、、、火狐浏览器不管用不知道为什么,我这是在谷歌浏览器下运行的

原生JS实现简易轮播图

标签:样式   style   nts   效果   tab   window   为什么   分享   渐变   

原文地址:https://www.cnblogs.com/deepSleeping/p/10288422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!