JQuery的无缝滚动
图片无缝向左滚动的代码如下:
<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()" οnclick="fun1();"/>
<input type="button" value="显示demo1.width())" οnclick="fun2();"/>
</body>
</html>
那二个按钮主要是为了自己观察值的变化之用,正式使用中可以去掉。
向右无缝滚动的HTML同上,只是js脚本中的Marquee函数不同,代码如下:
if(demo.scrollLeft()==0){
demo.scrollLeft(demo1.width());
}else{
demo.scrollLeft(demo.scrollLeft()-1);
}
}
向上无缝滚动的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()" οnclick="fun1();"/>
<input type="button" value="显示demo1.height())" οnclick="fun2();"/>
</body>
</html>
向下无缝滚动的HTML代码同上,只是js脚本中的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的无缝滚动相关推荐
- php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
- jquery 文字无缝滚动
这里作为一个文字无缝滚动,简单js写法记录 html: <!-- box-move 滚动的盒子ul1 滚动列表ul2 衔接列表--> <div id="box-move&q ...
- jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...
- 化妆品护肤DiY的广告界面 简单的jquery 图片无缝滚动
/* ww 图片宽度 id table ID */ 代码应用实例 化妆品护肤DiY的广告界面 function moveleft(id,ww) {var stopKey = true;if(ww ...
- html自动滚动代码,html文字无缝滚动代码
实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体",SimSun,serif; background:#fff; color:#000; } .s ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- html纵向字幕无缝滚动,html文字无缝滚动代码
这篇文章主要为大家详细介绍了html文字无缝滚动代码,具有一定的参考价值,可以用来参考一下. 实例一: 经测试代码如下: 滚动板 body { font: 12px/1 "宋体", ...
- JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
- html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】
本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: slider *{ padding: 0; margin: 0; } li{ list-style-type: n ...
最新文章
- 在Windows 8下成功安装.Net3.5的方法
- [笔记] 大家一起来测试,benchmark起来(MySQL下的TPC-C,TPC-H,TPC-W)
- 随机密码php,PHP会生成随机密码
- (一)SpringBoot 整合 MyBatis
- vue的鼠标移入和移出
- 识别Gradle约定
- LeetCode 1197. 进击的骑士(BFS)
- OJ1007: 鸡兔同笼
- 10个必会的 PyCharm 技巧,附高清大图
- LeetCode-118杨辉三角C++详解
- 一步一步写算法(开篇)
- 电视领域“烧钱”不止,酷开为何反成赢家?
- MCSA / Windows Server 2016 使用Hyper-V组件搭建实验环境
- 一款基于TCP协议/Netty框架开发的一款基本简单的屏幕共享软件(局域网内)
- ISA防火墙策略配置
- linux marvell 网卡驱动,坑爹的marvell linux 网卡驱动
- 解决无法设置默认打开方式
- 保利紫山开启湛江城市墅居新纪元
- 26.Vue列表渲染中key的作用与原理(内含虚拟DOM的对比算法详解)
- 下列属于计算机网络主要性能指标的有( ),下列属于计算机网络性能指标的有A.速率B.带宽C.时延D.误码率...
热门文章
- 容易的linux自动化运维工具之clinet端(二)
- .Net下的签名与混淆
- int b = 1;int c = b^0xff;求C
- Fully decentralized NFT system towards Metaverse: Next generation Seatlab business model
- 一些在数字化转型的方面的公司和例子
- 2021 第三封拒信 来自牛津大学自主智能机器和系统 Autonomous Intelligent Machines and Systems
- 转:UNITY,如何为你的游戏选择正确的网络类型
- 【转】UNITY中相机空间,投影空间的正向问题
- U3D 动画帧事件问题
- 周赛 Hd2270+总结改进