A. DW图片无缝滚动,放了三张图,但是只有一张一直重复滚动
1、使用marquee标签。
2、使用方法:
<marquee><img src="你的图片地址" /></marquee>
B. 【HTML】如何实现无缝循环的图片滚动效果
网站中,有时为了更好的利用有限的页面空间展示更多的内容,也为了丰富网站页面自身的表现样式,我们往往会用到图片滚动的效果。想要实现这种效果,只需要在想要显示的表格或网页中加入以下代码即可实现: <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_缩小大小.JPG" /> <img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_缩小大小.JPG" /> //这个图片的地址可以是相对的也可以是绝对的 </td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面,我们就上面代码的主要部分进行分析: <div id=demo style="overflow:hidden;height:100px;width:300px;"> 这段代码中下划线的部分表示我们这段滚动图片所占用区域的大小。用户可根据页面的实际需要进行调节。但一般情况下至少要大于或等于图片的高度和宽度。 <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /> 上面这段代码是图片的代码。每加入一行如上代码,那就会多出一个展示的图片。图片可以是一个,也可以是无数个。需要强调的是,每个图片的高度和宽度应尽量的统一大小,主要显示出来的效果才会更好看。 var speed=30 这行代码是控制图片滚动的速度。数字越小,滚动的也就越快;相反,数字越大,滚动的也就越慢。
C. 网页制作怎样让图片滚动
网页图片无缝滚动实现代码:
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">产品名称</a></span></li>
</ul></div><div id="图片展示代码例子"></div></div></div><script>
<!--
var speed=20; //数字越大速度越慢
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></td>
</tr>
</table>
D. js图片无缝滚动只滚动一次就停止了这个问题请教一下,怎么办
无缝滚动通常采用一个源版块,一个复制版块,两块并排合成一个版主体,在一个较小权范围的母版块里并排滚动。
假设向上滚动那么
js每隔几十毫秒设置主体头部减一
js判断当版块2的头部减母版块的头部小于等于零时就设置版块主体头部等零,这样就实现了一个循环
如果你的判断有误或者错误赋值或者这个主体总长还没有母版块长就会失灵。
E. js图片无缝滚动的原理是什么
以垂直滚动为例:一组图片
控制它的滚动条进行滚动
且此时对这组图片进行专复制并添加进属原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了,而就在此刻我们将滚动条高度设置为0(因为速度很快,所以不会出现停顿感),你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加,以及滚动条距离的获取和修改。网上代码很多,都是基于这类构思
F. 在PPT2003中如何实现无限从左到右循环的滚动图片效果
提前来指定哪张停下的话是可以自实现的
结果不确定的话那就没办法
如果你是用来抽取随机结果的话ppt做不到
ppt的所有效果都是线性的,有因必有果
不过如果你只是想在演示的时候效果更炫目
其实预定结果也无妨
预定结果的话就是很简单的效果了,无非是滚一番一点出结果,
设一个循环动作单击结束接个对象出现效果就可以
完全可以先抽奖,把ppt只当作宣布的方式而已。
就像电视鉴宝里那个滚动的估价示数器,
结果是专家定的,只是为了好看才一个一个数滚出来。
G. 怎样在网页制作中设置图片左右无缝滚动
网站常用的向左滚动 首尾相接
你可以把图片衔接的路径改成你电脑上的就行了.宽度,长度你可以自己改,图片指向的网页也可以改。图片数量也可以加。把下面代码另存为html格式就可以了。
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="demo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><a href="www..com"><img src="01.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="02.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="03.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="04.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="05.gif" width="120" height="100" border="0"></a>
<td><td><a href="www..com"><img src="06.gif" width="120" height="100" border="0"></a>
<td>
<td><a href="www..com"><img src="07.gif" width="120" height="100" border="0"></a>
<td>
</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
H. 图片无缝 滚动 不用JS 可以实现吗
可以。假如是自动的横向滚动就可以
html是静态的显示,所以他只能保证显示的内内容容而不是显示的动画所以无法解决动态问题。
css3增加了许多的动画效果,所以当你期望没有任何事件进行,图片在可视界面里面自动滚动的话,css3是可以实现的。
如果是用鼠标进行滚动,那么就必须使用js。
html是内容的静态展示。
css是样式的渲染。
js是事件的触发。