网页图片循环播放效果【百科全说】

在网页设计过程中，为了更好的展示产品，通常都会制作一些带有循环播放效果的图片，充分的利用这一网页效果，能够突显网站的影响力，达到事半功倍的效果。实现图片循环播放效果也是网页设计者必备之基本技能。下面让我们一起来学习一下实现图片循环播放效果的制作方法。

操作方法

01

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片循环播放效果的素材。
02

网页目录的层次结构如下。需要 index.html index.css idnex.js三个文件以及一个images文件夹。用来存放图片素材。
03

使用Sublime编辑器编辑 index.html <body> <div id="photo-list"> <ul id="scroll"> <a href="#"><img src="images/1.jpg" width="1033px" height="580px" alt=""/></a> </ul> </div> </body>
04

使用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;}
05

使用Sublime编辑器编辑 index.js var OneLinks = new Array(3);//图片数组 OneLinks[0] = "images/1.jpg";//给图片数组赋值，即变换时的图像值 OneLinks[1] = "images/2.jpg"; OneLinks[2] = "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')[0].src = OneLinks[j];//将每次即将变换的图像值赋值给图片元素的src i++; }; speed = 1000;//变换的时间差，越大变换速度越慢 var timer = setInterval(marquee, speed); }
06

添加css连接和加入js代码注意：css连接加在网页首部，而js连接加在网页末尾。完整代码如下： <link rel="stylesheet" type="text/css" href="index.css"> <body> <div id="photo-list"> <ul id="scroll"> <a href="#"><img src="images/1.jpg" width="1033px" height="580px" alt=""/></a> </ul> </div> </body> <script type="text/javascript" src="index.js"></script>
07

在浏览器中调试index.html网页，发现OK啦，图片可以循环播放了。

网页图片循环播放效果

操作方法

相关推荐