渐变主要是通过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:只能帮你到这里了，按钮什么的没有....
时间： 2024-10-25 00:39:09