图片左右滚动的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
随机推荐
- Repeater数据绑定
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...
- pch和info.plist初探
整理下之前的关于pch和info.plist文件,一下文件部分内容是从传智博客的课件里截取
- 关于float的感悟
给元素设置了float样式后,最终的结果是: 1:这个元素漂浮起来, 2:其他的元素位置可以视为 这个元素不存在 的时候的位置:但是float样式还是对整个页面有所影响 3:float的影响就是他附近 ...
- GitHub如何在自己的Stars中进行搜索
默认的搜索结果,仅仅搜索原创的repository 想要搜索的时候,能够搜索到fork出来的repository的话 在关键字后面加上空格 fork:true
- Creating Timer in Oracle D2k / Forms 6i and Displaying a Clock
Creating Timer in Oracle D2k / Forms 6i and Displaying a Clock This is about timer in D2k An externa ...
- TYPES、DATA、TYPE、LIKE、CONSTANTS、STATICS、TABLES
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- LVM逻辑分区
视频:http://v.youku.com/v_show/id_XNTk2NzExMTg0.html?f=27874439&o=1&spm=0.0.playList.5!3~5~A.t ...
- python_way ,day2 字符串，列表，字典，时间模块
python_way ,day2 字符串,列表,字典,自学时间模块 1.input: 2.0 3.0 区别 2.0中 如果要要用户交互输入字符串: name=raw_input() 如果 name=i ...
- 在ubuntu上配置apue的运行环境
http://www.apuebook.com/code3e.html 在上面的网站下载代码包,解压得到源码 sudo apt-get install libbsd-dev 安装这个支持,在解压包的m ...
- Redis基础知识之————php-Redis 常用命令专题
Keys del,delete - 删除键 dump - 返回存储在指定键值的序列化版本. exists - 确定键是否存在 expire,setTimeout,pexpire - 设置键的生存时间( ...