JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html></html>这样子的,没有加上documentType标签,不符合“标准”。
于是自己套上了标准之后再改了一下,发现在firefox中还是滚动不起来,知道肯定是某些地方的js只适用于IE吧,也懒得慢慢找了,直接用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()" onclick="fun1();"/>
<input type="button" value="显示demo1.width())" onclick="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()" onclick="fun1();"/>
<input type="button" value="显示demo1.height())" onclick="fun2();"/>
</body>
</html>
向下无缝滚动的HTML代码同上,只是js脚本中的Marquee函数不同,如下:
if(demo.scrollTop()==0)
demo.scrollTop(demo1.height());
else{
demo.scrollTop(demo.scrollTop()-1);
}
}
源码下载:/Files/niunan/scrollpic.rar
JQuery控制图片无缝滚动相关推荐
- jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表 jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 图片无缝滚动BootStrap 轻松实现
图片无缝滚动,不需要繁琐的javascript代码,只需引用BootStrap 中的javascript插件(Carousel)即可轻松实现.来看看吧: 现附上演示地址: https://haochn ...
- 第41天:匀速、缓动运动和图片无缝滚动
一.匀速运动和缓动运动 缓动运动 公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 < ...
- Jquery实现图片左右滚动,没有头尾的,一直循环
Jquery实现图片左右滚动,没有头尾的,一直循环.这样子的例子我已经发了很多了,这边放两个链接 http://www.corange.cn/archives/2010/06/3654.html ht ...
- dw自动滚动图片_DW图片无缝滚动代码
DIV 的图片无缝滚动 , DIV 图片上无缝滚动 , DIV 图片下无缝滚动 , DIV 图片左无缝滚动 , DIV 图片右无缝滚动 1. 先了解一下对象的几个的属性: innerHTML: 设置或 ...
- html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
- html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
- 水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
- 带左右箭头的图片滚动html,jquery控制左右箭头滚动图片列表的实例
jq控制左右箭头滚动图片列表 *{ margin:0; padding:0;font-size: 12px;} ul{ list-style:none;} .slider{ width:760px;b ...
最新文章
- 数学之美 系列十六 (下)- 不要把所有的鸡蛋放在一个篮子里 最大熵模型
- Delphi中点击DBGrid某一行获得其详细数据方法
- koa --- koa-bouncer验证
- WCF trace、log
- D语言/dlang 2.085.0 发布,GC、Objective-C 混编增强
- 华为开源构建工具_5个开源工具可快速构建地图应用
- beeline hiveserver2 start
- UDS协议之诊断会话管理服务 0x10
- 建立书签链接的html语言,书签链接
- 计算机专业研究生和本科生工资差距,本科生和研究生的工资差距,到底有多大?...
- 2020年安卓各大应用市场份额占比分析
- 共享LPT口打印机打印时,注意事项
- jquery遍历对象list拼接
- ROS-Melodic 编译Moveit全过程记录和错误解决方案
- Windows Terminal+zsh
- m_map包 绘制世界地图并投点(matlab)
- 淘客是什么 淘客怎么做
- flex 换行每行子元素对齐
- Java并发学习----大三仔(自己归纳的有错误请指正)
- Qt实现一个简单的应用程序——桌面助手
热门文章
- 神经网络支持大脑是「预测机器」,预测是节能的
- Science:穿梭于个体大脑与群体大脑之间探索社会智能
- 3 个问题:MIT专家论述关于阻碍AutoML发展的障碍
- 为什么要学数学?因为这是一场战略性的投资
- 关于自动驾驶, Mobileye 的 14 个最新观点
- 华为徐文伟:后香农时代,面向数学的十大挑战问题
- Nature Neuroscience|群际冲突的脑间同步机制
- 100年前没人信他,但他仅1项研究便远程摧毁万架飞机……
- 近期苹果、Facebook等科技巨头股价缘何不断下跌?
- MIT教授Tomaso Poggio演讲与专访:智能背后的科学与工程 | 腾讯AI Lab学术论坛