图片左右滚动的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
随机推荐
- jQuery常用技巧-使用的总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- offsetHeight 正则表达式验证格式
获取Div 的height width等属性 <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
- for循环以及复杂if else 例题
for循环语句 例一. 请输入一个整数,求1加到这个整数的和 例二 请从1到100 以内和7 有关的数字 例三,请设计一个游戏,前20关每关的分数是本身,21到30 是10分每关.31到40是20分每 ...
- Git笔记 整理2
补充: 1,如何只克隆git仓库中的一个分支? git clone -b <branch> <remote_repo> eg: git clone -b vivien_dev ...
- Python3基础 双星号 求一个数的几次幂
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- 用于JDBC操作数据库的公共类
/* * @(#)CommonSql.java 2011-9-5 * * Copyright 2011 Bianjing,All rights reserved. */ import java.sql ...
- ORACLE分页SQL语句
.根据ROWID来分 select * from t_xiaoxi where rowid in(select rid from (select rownum rn,rid from(select r ...
- 数独Sudoku
数独(すうどく,Sūdoku),是源自18世纪瑞士发明,流传到美国,再由日本发扬光大的一种数学游戏.是一种运用纸.笔进行演算的逻辑游戏.玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并 ...
- Python命令行解析argparse常用语法使用简介
查看原文:http://www.sijitao.net/2000.html python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argp ...
- JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载
JAVA帮助文档全系列 JDK1.5 JDK1.6 JDK1.7 官方中英完整版下载JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和 ...