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同上，只是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>

    <!-- 这句话不能少，记得把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);

    }

}

JQuery的无缝滚动的更多相关文章

jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery图片无缝滚动代码左右上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
基于JQuery打造无缝滚动新闻
JQuery实现新闻无缝滚动一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器
项目源代码下载地址:轮播图以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...
jquery实现无缝滚动
//点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...
liMarquee – jQuery无缝滚动插件（制作跑马灯效果）
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

随机推荐

[Asp.net]常见数据导入Excel，Excel数据导入数据库解决方案，总有一款适合你！
引言项目中常用到将数据导入Excel,将Excel中的数据导入数据库的功能,曾经也查找过相关的内容,将曾经用过的方案总结一下. 方案一 NPOI NPOI 是 POI 项目的 .NET 版本.POI ...
js删除数组指定元素
删除js数组中制定的元素,这里用到了jquery. var a = new Array("a","b","cc","d3" ...
Wrong list
1.背包dp[i][j]无论当前物品是否不大于j都可以转移dp[i-1][j] 2.循环从0开始还是1开始的问题 3.无向图边集数组开两倍 4.(3*987654321) > maxint 4. ...
我的vimrc
set nocompatible set langmenu=en_USlet $LANG= 'en_US' source $VIMRUNTIME/vimrc_example.vim source $V ...
[Linux] Linux常用文本操作命令整理
简单的总结一下常用的一些实用的Linux文本操作命令,包括wc(统计).cut(切分).sort(排序).uniq(去重).grep(查找).sed(替换.插入.删除).awk(文本分析). 1.统计 ...
git clone出现的error: The requested URL returned error: 401 Unauthorized
error: The requested URL returned error: 401 Unauthorized while accessing https://git.oschina.net/.. ...
java模拟post方式提交表单实现图片上传【转】
转自:http://blog.csdn.net/5iasp/article/details/8669644 模拟表单html如下: <form action="up_result ...
CString用法小结《转载》
http://blog.sina.com.cn/s/blog_a674ea930101aeey.html
XCode8目录整理后的几个警告消除,Missing file
Git目录没有及时更新导致终端进入目录运行如下命令 git rm main.m git rm Info.plist git rm AppDelegate.h git rm AppDelegate.m ...
6 VC维
1 VC维的定义 VC维其实就是第一个break point的之前的样本容量.标准定义是:对一个假设空间,如果存在N个样本能够被假设空间中的h按所有可能的2的N次方种形式分开,则称该假设空间能够把N个 ...

JQuery的无缝滚动

JQuery的无缝滚动的更多相关文章

随机推荐

热门专题