要在Dreamweaver中添加一组滚动图片，请问怎么做啊，最好有详细的步骤_IT百科

*** 作步骤：

1、在一个表格中插入一个一列三行的表格。

2、在第一个表格中，点击插图\媒体\图像查看器。输入图像查看器的名称。

3、调整图像查看器适当的大小。点击播放，看到没有放置图片的状态。

4、插入图片。选中图像查看器，发现窗口的右侧出现flash元素设计，点击图像地址栏，打开编辑数组窗口，分别插入图片，点击+或-可以增加或减少图片。

5、点击F12可以预览，发现图像查看器已经加入了。可以点击上面的键来进行 *** 控图像。

6、设置图像查看器的属性。回到flash元素，对其属性进一步更改设置，可以实现自动滚动播放的效果。

7、再点击F12预览可以看到达到了预期的效果，flash还提供了其他一些属性的更改，比如图像更换的样式等等，可以去设置。

html中marquee标签让图片滚动是这样做的：<marquee

onmouseover="this.stop()"

onmouseout="this.start()"

scrollamount="2"

scrolldelay="3"

direction="up"></marquee>只要把图片放在marquee中间就好。

其中

direction="up"

这个是垂直滚动；

（还有个down）

direction="left"这个是水平滚动（还有个right）

marquee标签是最容易做滚动的一种方法。当然还有高级的做法就是利用jq或者js自己写函数代码。这种代码也是比较好的。

想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

在原作者的基础上做了一定修改，主要还是在样式上面，将表格更换为标签。

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

height: 100px

text-align: center

float: left

}

#demo img {

border: 3px solid #F2F2F2

display: block

}

-->

</style>

向上滚动

</div>

</div>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML //克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

-->

</script>

图片下无缝滚动

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

height: 100px

text-align: center

float: left

}

#demo img {

border: 3px solid #F2F2F2

display: block

}

-->

</style>

向下滚动

</div>

</div>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML //克隆demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时

tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端

else{

tab.scrollTop--

}

var MyMar=setInterval(Marquee,speed)

tab.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

-->

</script>

图片左无缝滚动

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

width: 500px

}

#demo img {

border: 3px solid #F2F2F2

}

#indemo {

float: left

width: 800%

}

#demo1 {

float: left

}

#demo2 {

float: left

}

-->

</style>

向左滚动

</div>

</div>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

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

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>

图片右无缝滚动

<!--

#demo {

background: #FFF

overflow:hidden

border: 1px dashed #CCC

width: 500px

}

#demo img {

border: 3px solid #F2F2F2

}

#indemo {

float: left

width: 800%

}

#demo1 {

float: left

}

#demo2 {

float: left

}

-->

</style>

向右滚动

</div>

</div>

<!--

var speed=10//数字越大速度越慢

var tab=document.getElementById("demo")

var tab1=document.getElementById("demo1")

var tab2=document.getElementById("demo2")

tab2.innerHTML=tab1.innerHTML

function Marquee(){

if(tab.scrollLeft<=0)

tab.scrollLeft+=tab2.offsetWidth

else{

tab.scrollLeft--

}

var MyMar=setInterval(Marquee,speed)

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

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

-->

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11713306.html

要在Dreamweaver中添加一组滚动图片，请问怎么做啊，最好有详细的步骤

发表评论

评论列表（0条）