您的位置：首页 > Web前端 > JQuery

JQuery控制图片无缝滚动

2009-05-10 21:05 465 查看

经常有人问怎么在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>



<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">



<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);

}

}

向上无缝滚动的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>



<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">



<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);

}

}

源码下载：/Files/niunan/scrollpic.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航