代码如下:
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动效果图</title>
<script type="text/javascript" src="js/banner.js"></script>
<style type="text/css">
#banner {
width: 790px;
height: 340px;
margin: auto;
overflow: hidden;
}
</style>
<script type="text/javascript">
window.onload = function () {
//滚动的图片数组,数组存储的是图片的路径
var imgs = [];
imgs[0] = "img/banner1.jpg";
imgs[1] = "img/banner2.jpg";
imgs[2] = "img/banner3.jpg";
imgs[3] = "img/banner4.jpg";
imgs[4] = "img/banner5.jpg";
// 调用方法,第一个参数为滚动块的容器ID,第二个为图片数组,第三个为滚动方式
banner("banner", imgs, "opacity");
// banner("banner", imgs, "top");
// banner("banner", imgs, "bottom");
// banner("banner", imgs, "left");
// banner("banner", imgs, "right");
}
</script>
</head>
<body>
<div id="banner"></div>
</body>
</html><!DOCTYPE html>
<htm