JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动，我自己在一些项目中也会经常用到的，今天花了些时间，上网搜索了一下，下了些源码回来看了一下，发现都是只能在IE下能够滚动的，而且都是光<html></html>这样子的，没有加上documentType标签，不符合“标准”。
于是自己套上了标准之后再改了一下，发现在firefox中还是滚动不起来，知道肯定是某些地方的js只适用于IE吧，也懒得慢慢找了，直接用jquery来制作。
图片无缝向左滚动的代码如下：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > JS图片向左滚动 </ title >
< style type ="text/css" >
img {
border : none ;
}
</ style >
<!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
< script type ="text/javascript" src ="jquery.js" ></ script >
</ head >
< body >
< div id ="demo" style ="overflow:hidden;width:500px;" >
< table border =0 align =center cellpadding =1 cellspacing =1 cellspace =0 >
< tr >
< td id ="demo1" valign ="top" bgcolor ="ffffff" >
<!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
< table border ="0" cellspacing ="0" cellpadding ="0" >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="01.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="02.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="03.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="04.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="05.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
</ table >
</ td >
< td id ="demo2" valign ="top" ></ td >
</ tr >
</ table >
</ div >
< script type ="text/javascript" >
var speed = 30 ;
var demo = $( " #demo " );
var demo1 = $( " #demo1 " );
var demo2 = $( " #demo2 " );
demo2.html(demo1.html());
function Marquee(){
if (demo.scrollLeft() >= demo1.width())
demo.scrollLeft( 0 );
else {
demo.scrollLeft(demo.scrollLeft() + 1 );
}
}
var MyMar = setInterval(Marquee,speed)
demo.mouseover( function () {
clearInterval(MyMar);
} )
demo.mouseout( function () {
MyMar = setInterval(Marquee,speed);
} )
function fun1(){
alert(demo.scrollLeft());
}
function fun2(){
alert(demo1.width());
}
</ script >
< input type ="button" value ="显示demo.scrollLeft()" onclick ="fun1();" />
< input type ="button" value ="显示demo1.width())" onclick ="fun2();" />
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > JS图片向左滚动 </ title >
< style type ="text/css" >
img {
border : none ;
}
</ style >
<!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
< script type ="text/javascript" src ="jquery.js" ></ script >
</ head >
< body >
< div id ="demo" style ="overflow:hidden;width:500px;" >
< table border =0 align =center cellpadding =1 cellspacing =1 cellspace =0 >
< tr >
< td id ="demo1" valign ="top" bgcolor ="ffffff" >
<!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
< table border ="0" cellspacing ="0" cellpadding ="0" >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="01.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="02.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="03.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="04.jpg" width ="150" height ="100" ></ a ></ td >
< td >< a href ="#" target ="_blank" >< img src ="05.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
</ table >
</ td >
< td id ="demo2" valign ="top" ></ td >
</ tr >
</ table >
</ div >
< script type ="text/javascript" >
var speed = 30 ;
var demo = $( " #demo " );
var demo1 = $( " #demo1 " );
var demo2 = $( " #demo2 " );
demo2.html(demo1.html());
function Marquee(){
if (demo.scrollLeft() >= demo1.width())
demo.scrollLeft( 0 );
else {
demo.scrollLeft(demo.scrollLeft() + 1 );
}
}
var MyMar = setInterval(Marquee,speed)
demo.mouseover( function () {
clearInterval(MyMar);
} )
demo.mouseout( function () {
MyMar = setInterval(Marquee,speed);
} )
function fun1(){
alert(demo.scrollLeft());
}
function fun2(){
alert(demo1.width());
}
</ script >
< input type ="button" value ="显示demo.scrollLeft()" onclick ="fun1();" />
< input type ="button" value ="显示demo1.width())" onclick ="fun2();" />
</ body >
</ html >
那二个按钮主要是为了自己观察值的变化之用，正式使用中可以去掉。
向右无缝滚动的HTML同上，只是js脚本中的Marquee函数不同，代码如下：
function Marquee(){
if(demo.scrollLeft()==0){
demo.scrollLeft(demo1.width());
}else{
demo.scrollLeft(demo.scrollLeft()-1);
}
}
if(demo.scrollLeft()==0){
demo.scrollLeft(demo1.width());
}else{
demo.scrollLeft(demo.scrollLeft()-1);
}
}
向上无缝滚动的HTML代码如下：
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > JS图片向上滚动 </ title >
< style type ="text/css" >
img {
border : none ;
}
</ style >
<!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
< script type ="text/javascript" src ="jquery.js" ></ script >
</ head >
< body >
< div id ="demo" style ="overflow:hidden;height:300px;" >
< table border =0 align =center cellpadding =1 cellspacing =1 cellspace =0 >
< tr id ="demo1" >
< td valign ="top" bgcolor ="ffffff" >
<!-- 特别注意，下面的图片总高度必须大于上面定义的demo的宽度，如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题！ -->
< table border ="0" cellspacing ="0" cellpadding ="0" >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="01.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="02.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="03.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="04.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="05.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr id ="demo2" >
</ tr >
</ table >
</ div >
< script type ="text/javascript" >
var speed = 30 ;
var demo = $( " #demo " );
var demo1 = $( " #demo1 " );
var demo2 = $( " #demo2 " );
demo2.html(demo1.html());
function Marquee(){
if (demo.scrollTop() >= demo1.height())
demo.scrollTop( 0 );
else {
demo.scrollTop(demo.scrollTop() + 1 );
}
}
var MyMar = setInterval(Marquee,speed)
demo.mouseover( function () {
clearInterval(MyMar);
} )
demo.mouseout( function () {
MyMar = setInterval(Marquee,speed);
} )
function fun1(){
alert(demo.scrollTop());
}
function fun2(){
alert(demo1.height());
}
</ script >
< input type ="button" value ="显示demo.scrollTop()" onclick ="fun1();" />
< input type ="button" value ="显示demo1.height())" onclick ="fun2();" />
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > JS图片向上滚动 </ title >
< style type ="text/css" >
img {
border : none ;
}
</ style >
<!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
< script type ="text/javascript" src ="jquery.js" ></ script >
</ head >
< body >
< div id ="demo" style ="overflow:hidden;height:300px;" >
< table border =0 align =center cellpadding =1 cellspacing =1 cellspace =0 >
< tr id ="demo1" >
< td valign ="top" bgcolor ="ffffff" >
<!-- 特别注意，下面的图片总高度必须大于上面定义的demo的宽度，如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题！ -->
< table border ="0" cellspacing ="0" cellpadding ="0" >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="01.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="02.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="03.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="04.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
< tr align ="center" >
< td >< a href ="#" target ="_blank" >< img src ="05.jpg" width ="150" height ="100" ></ a ></ td >
</ tr >
</ table >
</ td >
</ tr >
< tr id ="demo2" >
</ tr >
</ table >
</ div >
< script type ="text/javascript" >
var speed = 30 ;
var demo = $( " #demo " );
var demo1 = $( " #demo1 " );
var demo2 = $( " #demo2 " );
demo2.html(demo1.html());
function Marquee(){
if (demo.scrollTop() >= demo1.height())
demo.scrollTop( 0 );
else {
demo.scrollTop(demo.scrollTop() + 1 );
}
}
var MyMar = setInterval(Marquee,speed)
demo.mouseover( function () {
clearInterval(MyMar);
} )
demo.mouseout( function () {
MyMar = setInterval(Marquee,speed);
} )
function fun1(){
alert(demo.scrollTop());
}
function fun2(){
alert(demo1.height());
}
</ script >
< input type ="button" value ="显示demo.scrollTop()" onclick ="fun1();" />
< input type ="button" value ="显示demo1.height())" onclick ="fun2();" />
</ body >
</ html >
向下无缝滚动的 HTML 代码同上，只是 js 脚本中的 Marquee 函数不同，如下：
function Marquee(){
if(demo.scrollTop()==0)
demo.scrollTop(demo1.height());
else{
demo.scrollTop(demo.scrollTop()-1);
}
}
if(demo.scrollTop()==0)
demo.scrollTop(demo1.height());
else{
demo.scrollTop(demo.scrollTop()-1);
}
}