图片左右滚动的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
随机推荐
- EasyUI DataGrid 添加排序
这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...
- 基于Node的PetShop，RESTful API以及认证
前篇 - 基本认证,用户名密码 后篇 - OAuth2 认证 由于宠物店的业务发展需要,我们需要一种更加便捷的方式来管理日益增多的宠物和客户.最好的方法就是开发一个APP,我可以用这个APP来添加.更 ...
- ContentProvider官方教程(6)provider支持的数据类型
Provider Data Types Content providers can offer many different data types. The User Dictionary Provi ...
- 【Java】Java创建String时，什么情况放进String Pool？
对Java创建String是否放入String pool作代码性的试验. 参考的优秀文章 JAVA面试题解惑系列(二)——到底创建了几个String对象? public String(String o ...
- C语言第3天标准的输入输出函数
:first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { border: 0; m ...
- JavaScript（1）
JavaScript(1) 第一次见到JavaScript的时候,看到了熟悉的"Java",原来都是骗人的,李鬼不是李逵呀=.= 然而发现这个东西还是特别实用的,和Java比起来它 ...
- Linux 上网络监控工具 ntopng 的安装
当今世界,人们的计算机都相互连接,互联互通.小到你的家庭局域网(LAN),大到最大的一个被我们称为互联网.当你管理一台联网的计算机时,你就是在管理最关键的组件之一.由于大多数开发出的应用程序都基于网络 ...
- 【leetcode❤python】 299. Bulls and Cows
#-*- coding: UTF-8 -*-class Solution(object): def getHint(self, secret, guess): " ...
- 2012 #1 Saving Princess claire_
Saving Princess claire_ Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & % ...
- 使用httpclient时候，出现“Too many open files”问题
最近接触的sendHttpPostRequest的问题比较多,近期碰到了关于 "java.net.SocketException: Too many open files" 的问题 ...