在网页中如何做图片无限循环滚动效果
1、准备好图片素材 制作图片循环滚动时需要用到
2、打开Dreamweaver，新建一网页文件，并保存
3、切换至代码编辑界面，输入如下代码：
<body><div id="photo-list"> <ul id="scroll">
<li><a href="#"><img src="images/1.jpg <li><a href="#"><img src="images/2.jpg <li><a href="#"><img src="images/3.jpg <li><a href="#"><img src="images/4.jpg <li><a href="#"><img src="images/5.jpg <li><a href="#"><img src="images/6.jpg
4、新建一CSS样式表文件，并将该文件保存到与前一文件相同目录下
5、在新建的样式表文件中输入如下代码：
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;
/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
6、在网页文件中添加对该样式表的引用：
<link rel="stylesheet" type="text/css" href="MyStyle.css">
7、新建一个JS文件，并将该文件保存
8、在”文件中输入如下所示代码：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};
9、然后在主页文件中添加对该“.js”文件的引用。
<script type="text/javascript" src="MoveEffect.js"></script>
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：38
阅读量：24
阅读量：53
阅读量：85
阅读量：156