图片左右滚动的js代码
html代码
<div class="demo" id="demo" style="overflow:hidden; width:660px; height:185px;" onmousemove="fnMouseOver();" onmouseout="fnMouseOut()">
<table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0">
<tbody><tr>
<td id="demo1" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
<table width="1270" border="0" cellspacing="0" cellpadding="0"> <tbody><tr align="center"> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td>
</tr>
<tr>
<td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
</tr>
</tbody></table></td> <td id="demo2" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
<table width="1270" border="0" cellspacing="0" cellpadding="0"> <tbody><tr align="center"> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
<td width="3" height="157"></td> </tr>
<tr>
<td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
<td width="3" height="30" align="center"></td>
<td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
</tr> </tbody></table></td>
</tr>
</tbody></table>
</div>
js代码
<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)
function fnMouseOver() {
clearInterval(MyMar);
}
function fnMouseOut() {
MyMar=setInterval(Marquee,speed);
}
function fnPre() {
for(var i=0;i<20;i++){
if(demo.scrollLeft()>=demo1.width())
demo.scrollLeft(0);
else{
demo.scrollLeft(demo.scrollLeft()+5);
}
}
}
function fnBack() {
//alert(demo1.width());
for(var i=0;i<20;i++){
if(demo.scrollLeft()<=0)
demo.scrollLeft(demo1.width());
else{
demo.scrollLeft(demo.scrollLeft()-5);
}
}
}
</script>
图片左右滚动的js代码的更多相关文章
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- 文字自动自左向右滚动的js代码
重要的一点,就是scrollLeft一直在变化.对象一直在移动,参照物没有动. 代码: css: #div1{display:black;width:110px;height:50px;line-he ...
- 实现公告栏无缝滚动的js代码（转）
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312" /> <title& ...
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
<script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if( ...
- 牛掰的图片等比缩放js代码
function resizeImg(img,oAW,oAH){ var oimgW = img.width, oimgH = img.height, oimg = img, oY = (oimgH/ ...
- 网页上图片点击放大js代码
//图片弹出事件 function showPict(path) { src = path; var mask = "<div style = 'position: absolute; ...
- iphone手机端图片错位修正的js代码
<script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...
- 一个兼容性比较好的图片左右滚动的js
下载地址:http://www.cnblogs.com/RightDear/admin/Files.aspx 文件:shhds.rar
随机推荐
- IOSUIcontrol事件
UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedControl分段控件.UISlider滑块.UITextField文本字段控件.UIPageControl ...
- 用Maonry如何实现UIScrollView
一,使用UIScrollView 与其他View 布局不同的地方在于, ScrollView的高度/宽度不固定: ScrollView的高度和宽度由其内容决定(即 Scroll View 的 cont ...
- 嵌入式Linux开发教程：Linux常见命令（上篇）
摘要:这是对周立功编著的<嵌入式Linux开发教程>的第7期连载.本期刊载内容有关LinuxLinux常见命令中的导航命令.目录命令和文件命令.下一期将连载网络操作命令.安装卸载文件系统等 ...
- 创立数据库表 examstudent
package com.hanqi.test; import java.sql.*; import java.util.*; public class LianXi { public static v ...
- BZOJ 2566 xmastree（树分治+multiset）
题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2566 题意:一棵有边权的树.结点有颜色.每次修改一个点的颜色.求每次修改后所有同色 ...
- Bug2算法的实现（RobotBASIC环境中仿真）
移动机器人智能的一个重要标志就是自主导航,而实现机器人自主导航有个基本要求--避障.之前简单介绍过Bug避障算法,但仅仅了解大致理论而不亲自动手实现一遍很难有深刻的印象,只能说似懂非懂.我不是天才,不 ...
- javascript 中函数eval()
eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它. 我们常常在Javascript中间到Eval这个函数, 有些人觉得这个函数很奇怪,可以把一些字符串变的功能很强大 在我 ...
- oracle默认管理员的帐号和密码以及密码修改和解除锁定
安装 ORACLE 时,若没有为下列用户重设密码,则其默认密码如下: 用户名 / 密码 登录身份 说明 sys/change_on_install SYSDBA 或 SYSOPER 不能以 NORMA ...
- 【转】VB中应用DDE
动态数据交换(dde)是windows应用程序间通讯的基本方法之一,在动态数据交换的过程中,提供数据和服务的应用程序称为服务器,请求数据或服务的应用程序则称为客户. dde交谈是由客户程序启动的.如果 ...
- P2P小贷网站业务数据流程分享
P2P小贷网站业务数据流程分享 引言 这是去年年底开发的一个项目,完成后和用户的衔接没有很好的做起来,所以项目就搁浅了.9月以来,看各路P2P风声水起,很是热闹:这里分享下我的设计文档,算是抛砖引玉, ...