JS 图片三行五列平铺效果

原创于 2013-04-16 19:44:10 发布 · 2.9k 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了一种使用JavaScript实现的图片三行五列平铺效果，通过定时器和数组预加载图片，实现了图片的自动轮播。代码中详细展示了如何动态更改多个图片元素的源来达到平滑切换的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">

         // 定时器
         var timeDelay;
         // 图片自动浏览时的时间间隔
         var timeInterval = 8000;

         //中间滚动图片dt
         var Imagedt;
         //中间滚动图片数组
         var Imageimage;
         //中间滚动图片序号
         var ImageNum;
         function LoadMiddleImage() {
             var ds = AjaxMethod.GetMiddlePhoto().value;
             if (ds) {
                 Imagedt = ds.Tables[0];
                 Imageimage = new Array();
                 for (var i = 0; i < Imagedt.Rows.length; i++) {
                     Imageimage.push(Imagedt.Rows[i].DefaultPicUrl);
                 }
                 var ImageimagePreload = new Array();
                 for (var i = 0; i < Imageimage.length; i++) {
                     ImageimagePreload[i] = new Image();
                     ImageimagePreload[i].src = Imageimage[i];
                 }
                 ImageNum = -1;
                 Image_auto();
             }
         }
         function Image_auto() {
             ImageNum++;
             document.getElementById("img1").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             document.getElementById("img2").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             document.getElementById("img3").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             document.getElementById("img4").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             document.getElementById("img5").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img6").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img7").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img8").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img9").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img10").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img11").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img12").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img13").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img14").src = Imageimage[ImageNum];
             ImageNum %= Imageimage.length;
             ImageNum++;
             timeDelay = setTimeout("Image_auto()", timeInterval);
             document.getElementById("img15").src = Imageimage[ImageNum];
             ImageNum++;

}

</script>

</head>
<body>
<table style="width:665px;height:170px;" cellpadding="5px" cellspacing="5px">
<tr>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;">
<img id="img1" alt="" src="scenery/1.jpg" width="250px"height="200px"/>" </td>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;">
<img id="img2" alt="" src="scenery/2.jpg" width="250px"height="200px"/></td>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;"> <img id="img3" alt="" src="scenery/3.jpg" width="250px"height="200px"/> /></td>

<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;"> <img id="img4" alt="" src="scenery/4.jpg" width="250px"height="200px"/></td>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;">
<img id="img5" alt="" src="scenery/5.jpg" width="250px"height="200px"/></td>
</tr>
<tr>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;">
<img id="img6" alt="" src="scenery/6.jpg" width="250px"height="200px"/></td>
<td style="border-style: solid; border-width: 1px; text-align:center; vertical-align:middle;">
<img id="img7" alt="" src="scenery/7.jpg"width="250px"height="200px"/></td>

</tr>

</table>

</body>
</html>