渐变主要是通过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; } setInterval(goto,3000); }