正文
javascript滚动,js滑轮滚动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
javascript实现平滑无缝滚动
本文我们实现纯JS方式的滚动广告效果，供大家参考，具体内容如下
先show一下成品：
首先是网页样式：
#demo
{
background:
#FFF;
overflow:hidden;
border:
1px
dashed
#CCC;
width:
1280px;
height:200px;
}
#demo
img
{
border:
3px
solid
#F2F2F2;
}
#indemo
{
float:
left;
width:
800%;
}
#demo1
{
float:
left;
}
#demo2
{
float:
left;
}
布局如下：
div
id="demo"
div
id="indemo"
div
id="demo1"
a
href="#"img
src="banner.jpg"
border="0"
//a
a
href="#"img
src="banner2.jpg"
border="0"
//a
/div
div
id="demo2"/div
/div
/div
具体的JS实现：
script
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
这里要注意的是：
scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度。
offsetWidth
是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
setInterval()
方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval()
方法会不停地调用函数,直到
clearInterval()
被调用或窗口被关闭。
明白了这个具体的实现就好理解了。
实现的原理是这样的：首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来，这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动，实现隐藏。其中有一点需要注意的是，由于这里是将两张图片同时放入左侧，当右侧显示了一半时会将左侧影藏的完全显示出来，又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关问答
Q1: JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
参数说明：
a.
function：要调用的JavaScript自定义函数名称。
b.
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
（1）在页面的合适位置添加一个id属性为demo的div标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;"
table
border="0"
cellspacing="0"
cellpadding="0"
tr
td
valign="top"
id="marquePic1"
!--
要循环滚动的图片
--
table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
tr
align="center"
%for(int
i=1;i8;i++){%
td
img
src="Images/%=i%.jpg"
width="118"
height="166"
border="1"
/td
%}%
/tr
/table
/td
td
id="marquePic2"
width="1"/td
/tr
/table
/div
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
script
language="javascript"
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
/script
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
Q2: 怎么用JS脚本使多张图片滚动？
推荐使用marquee实现图片滚动,示例:
marquee
scrolldelay="100"
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"img
src="xxxxxxx"/marquee
其中scrolldelay="100"
===指滚动延迟时间,单位是毫秒ms,默认为90ms
direction="up"
===指滚动方向,默认从左往右,可取的值为:up,down,left,right
onmouseover="this.stop()"
===指鼠标悬停在图片上时,图片静止
onmouseout="this.start()"
===指鼠标离开图片时,图片运动
希望对您有所帮助
