阅读背景:

JavaScript DOM操作实现网站滚动图特效_侯春强的博客

来源:互联网 

代码如下:

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



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: