當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

JQuery的无缝滚动

發布時間：2025/3/15 编程问答 12 豆豆

生活随笔收集整理的這篇文章主要介紹了 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()"?οnclick="fun1();"/>
<input?type="button"??value="顯示demo1.width())"?οnclick="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()"?οnclick="fun1();"/>
<input?type="button"??value="顯示demo1.height())"?οnclick="fun2();"/>
</body>
</html>

向下無縫滾動的HTML代碼同上，只是js腳本中的Marquee函數不同，如下：

function?Marquee(){?
????if(demo.scrollTop()==0)
????????demo.scrollTop(demo1.height());?
????else{
????????demo.scrollTop(demo.scrollTop()-1);
????}
}

轉載于:https://www.cnblogs.com/wei-91/p/6079943.html

總結

以上是生活随笔為你收集整理的JQuery的无缝滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jquery

上一篇： 6-6-1：STL之map和set——s
下一篇： HTTP的长连接和短连接