分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

原生JS实现简易轮播图

发布时间:2023-09-06 02:30责任编辑:董明明关键词:轮播图

原生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实现简易轮播图

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved