导航:首页 > 无缝钢管 > 前端如何实现图片横向无缝滚动

前端如何实现图片横向无缝滚动

发布时间:2023-08-30 12:14:50

1. html图片无缝滚动代码怎么写

marquee和js两种方法,我建议使用的,marquee兼容性不好,只兼容IE浏览器。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE>
</HEAD>
<BODY>
用marquee实现首尾相连循环滚动效果(仅IE):<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript实现首尾相连循环滚动效果(兼容firefox):<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionscroll(obj){
vartmp=(obj.scrollLeft)++;
//当滚动条到达右边顶端时
if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
//当滚动条滚动了初始内容的宽度时滚动条回到最左端
if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>

望采纳!

2. 【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 这行代码是控制图片滚动的速度。数字越小,滚动的也就越快;相反,数字越大,滚动的也就越慢。

3. js图片无缝滚动的原理是什么

不断减少图片距离外面容器的间距,然后在间距为0的刹那将图片重新回到初始位置。为了版不至于看出权破绽,滚动图片要弄双份儿,比如你需要滚动的是AB,那么在容器里放的就是ABAB。那个外面的容器还要设置大小,然后将超出的内容隐藏。

这是我当年自己分析某人的JS图片滚动代码时总结的。

现在嘛都直接整jquery的插件了

阅读全文

与前端如何实现图片横向无缝滚动相关的资料

热点内容
不锈钢折板怎么推销 浏览:585
未完成三方存管签约 浏览:327
注塑模具机台锁模力如何评估 浏览:817
306不锈钢多少钱一吨 浏览:709
市面上如何检测不锈钢 浏览:710
蜂窝装不锈钢锅质量怎么样 浏览:184
钢铁侠胸前那个是什么东西 浏览:348
美国钢铁征收税率原来为多少钱 浏览:816
6毫米钢板长宽是多少钱一吨 浏览:845
不锈钢碗怎么做几号 浏览:966
西数移动硬盘为什么焊接 浏览:125
焊接时怎么把握焊接速度 浏览:578
怎么洗掉塑料烘焙模具上的面粉 浏览:107
钢筋的弯钩怎么规定的 浏览:622
热镀钢管用什么焊条 浏览:905
钢铁力量乌鸦怎么样 浏览:649
铝锅和不锈钢锅哪个重 浏览:522
铝镁合金厂在哪里 浏览:848
铝合金压铸件有什么缺点 浏览:921
戒指的模具用什么做的 浏览:678