Simone网页图片循环播放效果
的有关信息介绍如下：
在网页设计过程中，为了更好的展示产品，通常都会制作一些带有循环播放效果的图片，充分的利用这一网页效果，能够突显网站的影响力，达到事半功倍的效果。实现图片循环播放效果也是网页设计者必备之基本技能。下面让我们一起来学习一下实现图片循环播放效果的制作方法。
素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片循环播放效果的素材。
网页目录的层次结构如下。
需要
index.html
index.css
idnex.js三个文件 以及
一个images文件夹。用来存放图片素材。
使用Sublime编辑器 编辑 index.html
使用Sublime编辑器 编辑 index.css
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 1张图片的宽度（包含宽度、padding、border、图片间的留白）计算：1033+2*2+1*2
*/
width:1039px;
/* 图片的宽度（包含高度、padding、border） 计算：580+2*2+1*2
*/
height:586px;
margin:50px auto; border:1px #ccc; }
#photo-list ul { list-style:none;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
使用Sublime编辑器 编辑 index.js
var OneLinks = new Array(3);//图片数组
OneLinks = "images/1.jpg";//给图片数组赋值，即变换时的图像值
OneLinks = "images/2.jpg";
OneLinks = "images/3.jpg";
var id = function(el) {
return document.getElementById(el);
};
c = id('photo-list');//由id得到photo-list元素
ul = id('scroll');//由id得到scroll元素
var i=0;
if(c){ marquee = function() {
var j=i%3;//以三个图片为例，循环
ul.getElementsByTagName('img').src = OneLinks[j];//将每次即将变换的图像值赋值给图片元素的src
i++;
};
speed = 1000;//变换的时间差，越大变换速度越慢
var timer = setInterval(marquee, speed);
}
添加css连接和加入js代码
注意：css连接加在网页首部，而js连接加在网页末尾。完整代码如下：
在浏览器中调试index.html网页，发现OK啦，图片可以循环播放了。
