dreamweaver8中如何让滚动的图片首尾接起来

JavaScript035

dreamweaver8中如何让滚动的图片首尾接起来,第1张

不管是在dreamweaver8还是在CS系列中，用marquee标签，再配合JS脚本就可以实现！

我设计网站时常用这种高效的方法，下面是我原创的，而且经过优化的代码，很多网友提问时也是用我的方法。

<marquee 属性>要滚动的文字图片</marquee>

但不管你用marquee的什么属性,都只能实现滚动效果,但不能实现首尾相接循环走马灯效果（我摸索了很久）；你要实现首尾相接循环走动效果,那真的只有借助JavaScript脚本，即是js代码。

下面我给出一个结合marquee和JavaScript来实现首尾相接循环走动效果代码及其实现方法:

1.首先你要先建一个文件夹，比如名为“gundong”的文件夹，再建两个名为“js”和“images”的子文件夹。

2.用记事本将下面的js代码复制进去，保存在js子文件夹下文件名为scrollpic.js

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed3)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}

3.用记事本将下面的html代码复制进去，保存在gundong根文件夹下,文件名为index.htm

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>http://hi.baidu.com/wibmj</title>

<style type="text/css">

td {font-size: 12px}

</style>

</head>

<body>

<CENTER>

<TABLE style="BORDER: #ccc 1px solid" cellSpacing=0 cellPadding=0 width=750 align=center border=0>

<TBODY>

<TR>

<TD>

<DIV id=demo style="OVERFLOW: hiddenWIDTH: 100%COLOR: #ffffff">

<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">

<TBODY>

<TR>

<TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">

<p>2</p>

</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>

<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>

</tr>

</table></TD>

<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>

<script language=JavaScript src="js/scrollpic.js"></script>

</TD></TR></TBODY></TABLE></TD></TR></TABLE>

</CENTER>

</BODY></HTML>

4.在images文件夹中法如一张名为pic_bg.jpg的图片.

注意上面文件的文件名和后缀要保存正确，不要改动，如果改动了，就要修改代码里的路径才能正确显示的，其实也不难。 如果你要将这些效果转移到ASP或其它编码环境中，你可以复制上面HTML中的<TABLE>......</TABLE>标签里的代码，或者新建一个<DIV>图层,再转移过去，注意要根据实际情况修改js脚本文件的路径，这种方法很奏效！

跟普通的左右切换轮播图类似，但是它看起来是首尾相连的。

首先来讲一下我的思路：

我们要想无缝切换图片，必须要在所有图片的最后添加一张第一张图片，因为要实现从最后一张切换到第一张时有过渡效果；

之后我们要让你处在第一张时，向前向后切换都要进行 隐式切换 。

我们也可以将所有的轮播图的图片外面套一层div，并设置绝对定位，然后使用 父相子绝 ，来让图片可以相对父元素定位（父元素就是装轮播图的盒子）

之后，只要我们让不该显示的图片定位到盒子范围外的位置（父元素设置overflow:hidden），在需要切换图片时，我们就把当前图片前后的图片定位到对应位置，然后通过setInterval方法循环改变其位置实现轮播效果。之后更改当前图片的索引即可。