<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image slide</title>
<style type="text/css">
#img_div {
height: 375px;
width: 100%;
margin: auto;
}
#img_div img {
position: absolute;
height: 375px;
width: 100%;
}
</style>
<script type="text/javascript" language="javascript">
var arr = ["1.jpg", "2.jpg", "3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"];
window.onload = function () {
var id = document.getElementById("img_div");
id.innerHTML = '<img src="' + arr.join('" alt=""><img src="') + '" alt="">';
id.style.background = "url('" + arr.pop() + "') no-repeat center";
var img = id.getElementsByTagName("img"), l = arr.length, n = 100;
(function () {
var callee = arguments.callee;
n--;
if (n < 0) {
l--;
n = 100;
if (l < 0) {
l = arr.length;
for (var k = img.length; k--;) {
img[k].style.opacity = 1;//还原成不透明
img[k].style.filter = "alpha(opacity=100)";
}
}
setTimeout(callee, 3000);//每张图片停留3秒（自己调整）
} else {
setTimeout(callee, 30);//30毫秒改变一下透明度（自己调整）
}
img[l].style.opacity = n / 100;
img[l].style.filter = "alpha(opacity=" + n + ")";
})();
}
</script>
</head>
<body>
<div>
<img src="lunbo2.jpg">
</div>
<div id="img_div">
</div>
<div>
<img src="lunbo1.jpg">
</div>
</body>
</html>
var arr = ["1.jpg", "2.jpg", "3.jpg","4.jpg","5.jpg","6.jpg","7.jpg"];
window.onload = function () {
var id = document.getElementById("img_div");
id.innerHTML = '<img src="' + arr.join('" alt=""><img src="') + '" alt="">';
id.style.background = "url('" + arr.pop() + "') no-repeat center";
var img = id.getElementsByTagName("img"), l = arr.length, n = 100;
var timer,isOver///////////
id.onmouseout = id.onmouseover = function (e) {///////////
e = e || window.event;
isOver = e.type == 'mouseover';
if (isOver) clearTimeout(timer);
else timer = setTimeout(setOpacity, 3000);
}
function setOpacity() {
n--;
if (n < 0) {
l--;
n = 100;
if (l < 0) {
l = arr.length;
for (var k = img.length; k--;) {
img[k].style.opacity = 1;//还原成不透明
img[k].style.filter = "alpha(opacity=100)";
}
}
if (!isOver) timer = setTimeout(setOpacity, 3000);////////////每张图片停留3秒（自己调整）
} else {
setTimeout(setOpacity, 30);//30毫秒改变一下透明度（自己调整）
}
img[l].style.opacity = n / 100;
img[l].style.filter = "alpha(opacity=" + n + ")";
}
setOpacity()
}