无缝滚动 jQuery经典代码 (收藏)
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css"> img { border: none; } </style>
<div id="demo" >
<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="img/1.jpg" width="150" alt="第一张图" height="100"></a>
</td>
<td>
<a href="#" target="_blank"><img src="img/2.jpg" width="150" alt="第二张图" height="100"></a>
</td>
<td>
<a href="#" target="_blank"><img src="img/3.jpg" width="150" alt="第三张图" height="100"></a>
</td>
<td>
<a href="#" target="_blank"><img src="img/4.jpg" width="150" alt="第四张图" height="100"></a>
</td>
<td>
<a href="#" target="_blank"><img src="img/5.jpg" width="150" alt="第五张图" 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); } )
</script>
无缝滚动 jQuery经典代码 (收藏)的更多相关文章
- jquery 无缝滚动 jquery.kxbdmarquee
DEMO http://code.ciaoca.com/jquery/kxbdmarquee/demo/ 官网 http://code.ciaoca.com/jquery/kxbdmarquee/ D ...
- 实现公告栏无缝滚动的js代码(转)
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...
- JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 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 kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- 自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
随机推荐
- Linux学习2——文件与目录
一.写在前面 在本节将介绍Linux下文件与目录的一些基本概念以及一些基本操作. 二.完成目标 1.了解文件和目录的一些基本概念 2.操作文件和目录的相关命令 3.文件内容查阅命令 4.文件查询命令 ...
- 贝叶斯网络基础(Probabilistic Graphical Models)
本篇博客是Daphne Koller课程Probabilistic Graphical Models(PGM)的学习笔记. 概率图模型是一类用图形模式表达基于概率相关关系的模型的总称.概率图模型共分为 ...
- 编译安装apache2.4
一.编译安装apache2.4Apache官方说:与Apache 2.2.x相比,Apache 2.4.x提供了很多性能方面的提升,包括支持更大流量.更好地支持云计算.利用更少的内存处理更多的并发等. ...
- 管道通信之无名管道---pipe()
pipe()函数在子进程产生之前就应该存在. 父子进程之间只进行一次传递 /*============================================ > Copyright ( ...
- IC卡、M1卡、CPU卡、SAM卡、PSAM卡的联系与区别
一. 技术方面(非接触式IC卡) 1. 逻辑加密卡又叫存储卡,卡内的集成电路具有加密逻辑和EEPROM(电可擦除可编程只读存储器). 2. CPU卡又叫智能卡,卡内的集成电路包括中央处理器(CPU ...
- VS2008下WinRar源码生成dll和 lib总结
WinRar官方提供了源码(http://www.rarlab.com/rar_add.htm):如果自己想要修改里面的内容就要重新生成DLL和LIB,我在网上找了很多资料都没有说得很清楚.花一两天的 ...
- ecshop去掉head文件中ECSHOP v2.7.3标记的方法
去掉ecshop中<meta name="Generator" content="ECSHOP v2.7.3" />的方法:打开includes/c ...
- 基于本地iso 搭建的本地yum源 安装部署openldap
1,yum openldap-servers,openldap-clients 基于iso-cd1搭建的本地yum源(具体搭建参看ruige的repo本地快速搭建,在右边 找找看中输入repo key ...
- aix运维
AIX操作系统中有很多程序,为了进行程序版本控制,每一个程序集都有自己的版本号.版本号是由小数点分隔的四位数字,例如5.3.0.9其含义是:操作系统版本号(version).发行版本号(release ...
- 高仿精仿微信应用ios源码下载
微信,超过3亿人使用,能够通过手机网络给好友发送语音.文字消息.表情.图片和视频,还可以分享照片到朋友圈.通过摇一摇.查看附近的人,你可以认识新的朋友.使用扫一扫,你可以扫描二维码.条码.图书和街景. ...