首页 > 代码库 > JS自动渐变轮播
JS自动渐变轮播
渐变主要是通过CSS3的动画实现。
只需给css中添加transtion动画时间加上JS设置指定图片透明度显示与消失即可实现渐变过程。
效果图：
HTML:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style3.css" /> <script type="text/javascript" language="JavaScript" src="js/script3.js"></script> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body></html>
CSS:
*{margin:0; padding:0;} #box{width:300px; height:165px; border:1px black solid; margin:10px auto;} #box ul{list-style:none; position:relative;} #box ul li{width:300px; height:165px; position:absolute; transition:all 1s; opacity:0;} #box ul li:nth-of-type(1){background:url(../img/img1.jpg); background-size:100%;} #box ul li:nth-of-type(2){background:url(../img/img2.jpg); background-size:100%;} #box ul li:nth-of-type(3){background:url(../img/img3.jpg); background-size:100%;} #box ul li:nth-of-type(4){background:url(../img/img4.jpg); background-size:100%;}
JS:
onload = function(){ var li = document.getElementById(‘box‘).getElementsByTagName(‘li‘); var index = 0; goto(); function goto(){ for(var i=0;i<li.length;i++){li[i].style.opacity = 0;} if(index == li.length) index = 0; li[index++].style.opacity = 1; } var timer = setInterval(goto,3000); }
ps:只能帮你到这里了，按钮什么的没有....
JS自动渐变轮播
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。