php教程: php入门; php安全; php安装; php常用代码; php高级应用; php与数据库; php函数; 网络相关; XML应用; 图像处理; php基础; 邮件处理; php应用; 常见问题; apache; php框架模板; python; ruby; smarty模板; thinkphp; php正则表达式; Symfony; Perl

asp.net教程: 基础入门; .Net开发; C语言; VB.Net语言; WebService; 数据库应用; 报表/图形; E-mail专题; Win开发; XML应用; 安装和部署; 组件控件开发; 远程及网络应用; 其他相关; 安全和优化; C#/C; WinForm; Silverlight; WCF; WPF; ASP.NET MVC

手机开发: 安卓教程; ios7教程; Windows Phone; Windows Mobile; 手机常见问题; 手机软件; 手机硬件; 电话/短信; 游戏攻略; 平板电脑; 刷机教程; 智能手表; 微信; ios

css教程: CSS入门; 常用代码; 经典案例; 样式布局; 高级应用; 常见问题; css3教程

网页制作: 设计基础; Dreamweaver; Frontpage; js教程; XNL/XSLT; CMS技巧; Dom教程; 网页配色; jquery; html5教程; Delphi; extjs; magento; WordPress; dedecms教程; 网页编辑器

办公数码: word; excel; powerpoint; 金山WPS; 电脑新手; 电脑常见问题; 浏览器; 打印机; 显示器; Outlook; 数码相机; 电视; 空调; 冰箱; qq教程; 洗衣机; 游戏攻略; 游戏活动

jsp教程: Application与Applet; J2EE/EJB/服务器; J2ME开发; Java基础; Java技巧及代码; Jsp/Servlet开发工具; Java与XML; 面向对象编程; 邮件

asp教程: ASP入门; 高级应用; 技巧与性能优化; 安全加密; XML相关; 全文检索; 客户端相关打印; 数据库相关; 正则表达式; 系统相关; 组件开发; 脚本编码; 远程脚本; 邮件相关; FSO专题; 其它相关

ps教程: Photoshop; Fireworks; Coreldraw; Illustrator; 3DS_MAX; AutoCAD; 非主流; 元旦素材; 新年春节素材; 元旦图片; 圣诞节图片; 年历日历挂历模板; 元旦贺卡; 新年贺卡; 圣诞节电子贺卡; 情人节贺卡; 中秋贺卡; 图片处理

数据库: Access; Mssql; mysql教程; Oracle教程; Foxpro; SYBASE教程; DB2教程; PostgreSQL; ling; MongoDB; redis

SEO优化: SEO资讯; SEO入门; SEO综合; Google; 百度指南; Yahoo研究; Alexa排名; Dmoz专栏; 搜索技术; 推广技巧; 策划运营; 赚钱窍门

网页特效: 综合特效; 鼠标特效; 页面特效; 导航菜单; 背景特效; 状态栏类; 文本特效; 链接特效; js广告代码; 窗口特效; 按钮特效; 时间日期; 计数转换; 游戏娱乐; CSS相关; 代码生成; 黑客性质; 对联广告

网络新鲜事: 业界动态; 招聘求职; 世界杯在线直播; 互联网加

flash教程: As3.0; 动画技术; Action; Flash游戏; 手绘艺术; 常见问题; flex

操作系统: linux; Windows7; Windows服务器; nginx; 服务器安全; Ubuntu; freebsd; windows8; windows2008; CentOS; win10

网站运营: 建站经验; 推广优化; 网络创业; 赚钱; 免费资源; 策划盈利; 域名投资

路由器设置: Mercury路由器; Tenda路由器; Fast路由器; Netcore磊科路由器; 华为路由器; ZTE中兴路由器; 小米路由器; HiWiFi; 360路由器; 其它; tplink路由器; D-link路由器

班主任工作: 班主任工作总结; 班主任工作经验交流; 班主任工作反思; 班主任工作心得体会; 班主任评语; 班主任培训; 班级管理家长会; 班主任演讲稿; 班主任工作计划(小学/初中/高中); 班主任工作案例; 班主任工作日志

范文网: 申请书; 合同范文; 党团范文; 文秘知识; 工作总结; 工作计划; 工作报告; 演讲稿; 汇报体会; 心得体会; 自我鉴定; 作文; 检讨书; 感谢信; 求职信; 辞职信

淘宝大学: 淘宝规则; 电商资讯; 淘宝新手; 淘宝运营; 刷单平台; 淘宝直通车; 店长访谈; 淘宝素材

酷站: 欧美酷站; 韩国酷站; 中文酷站; 综合门户; 其它酷站

祝福短信: 日常祝福; 幽默祝福; 周末问候; 生日祝福; 早安晚安; 生病问候; 送别短信; 感谢短信; 思念短信; 情话短信; 表白短信; 求婚短信; 爱情短信; 道歉短信; 元旦; 春节; 情人节; 圣诞节; 感恩节; 母亲节; 父亲节; 愚人节; 网络节日; 纪念日; 结婚生子; 开业短信; 乔迁短信; 升职短信; 热点短信; 感悟人生; 个性签名; 笑话大全; 冷笑话; 调侃短信; 趣味短信; 爆笑口误; 英文短信; 经典短信; 中秋; 教师节; 领导; 国庆节; 邀请; 同学; 战友; 元宵; 清明; 光棍; 端午节; 劳动节; 儿童节; 寒露; 霜降; 立冬; 小寒; 大寒; 小雪; 大雪; 冬至; 万圣节; 春季; 养生; 下班; 春; 夏; 建军节; 妇女节; 腊八节; 财神节; 植树节; 重阳节; 三伏; 校园寄语; 青年节; 句子; 说说; 留言; 小年; 除夕; 平安夜; 建党节

下载频道

视频: 网页编辑器下载; 开发手册; PHP搭建环境; 上传工具

企业信息化: SAP; SharePoint; GIS技术

站长学院

今天更新

热点资讯

javascript学习指南_Javascript控制图片向左向右滚动代码(兼容FF、IE)

时间：2018-10-04 来源：js教程阅读：

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS控制图片向左向右滚动兼容FF、IE</title>
<style>
.rollBox01{width:600px;overflow:hidden;}
.Ccont01{width:600px;overflow:hidden; float:left;}
.Ccont01 .pic{width:200px;float:left; border:1px solid #cccccc; height:150px; margin-left:10px;}
*+html .rollBox01 .Cont01 .pic{width:200px;float:left;}
#List01,.rollBox01 #List02{float:left;}
.Czpp_Ce {
	width:19px; float:left; padding:0px 10px; height:150px;
}
.Czpp_Ce img{
         margin-top:20px;}
</style>
</head><body>

<img  onmousedown="ISL_GoUp_c()" onmouseup="ISL_StopUp_c()" onmouseout="ISL_StopUp_c()" style="cursor: pointer;" src="http://filesimg.111cn.net/2013/10/23/20131023060347104.gif">
              
                
                  
 
<img  src="http://filesimg.111cn.net/2013/10/23/2013102306034948.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060351838.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060353573.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/2013102306034948.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060351838.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060353573.jpg" />

<img  src="http://filesimg.111cn.net/2013/10/23/2013102306034948.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060351838.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060353573.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/2013102306034948.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060351838.jpg" />
<img  src="http://filesimg.111cn.net/2013/10/23/20131023060353573.jpg" />

<img  onmousedown="ISL_GoDown_c()" onmouseup="ISL_StopDown_c()" onmouseout="ISL_StopDown_c()" style="cursor: pointer;" src="http://filesimg.111cn.net/2013/10/23/20131023060356487.gif">

<script type="text/javascript">
// JavaScript Document

var Speed_c = 10; //速度(毫秒)
var Space_c = 10; //每次移动(px)
var PageWidth_c = 200; //翻页宽度
var fill_c = 0; //整体移位
var MoveLock_c = false;
var MoveTimeObj_c;
var Comp_c = 0;
var AutoPlayObj_c = null;
GetObj("List02").innerHTML = GetObj("List01").innerHTML;
GetObj("ISL_Cont_c").scrollLeft = fill_c;
GetObj("ISL_Cont_c").onmouseover = function(){clearInterval(AutoPlayObj_c);}
GetObj("ISL_Cont_c").onmouseout = function(){AutoPlay_c();}
AutoPlay_c();
function GetObj(objName){if(document.getElementById){return eval("document.getElementById(""+objName+"")")}else{return eval
("document.all."+objName)}}
function AutoPlay_c(){ //自动滚动
clearInterval(AutoPlayObj_c);
AutoPlayObj_c = setInterval("ISL_GoDown_c();ISL_StopDown_c();",3000); //间隔时间
}
function ISL_GoUp_c(){ //上翻开始
if(MoveLock_c) return;
clearInterval(AutoPlayObj_c);
MoveLock_c = true;
MoveTimeObj_c = setInterval("ISL_ScrUp_c();",Speed_c);
}
function ISL_StopUp_c(){ //上翻停止
clearInterval(MoveTimeObj_c);
if(GetObj("ISL_Cont_c").scrollLeft % PageWidth_c - fill_c != 0){
Comp_c = fill_c - (GetObj("ISL_Cont_c").scrollLeft % PageWidth_c);
CompScr_c();
}else{
MoveLock_c = false;
}
AutoPlay_c();
}
function ISL_ScrUp_c(){ //上翻动作
if(GetObj("ISL_Cont_c").scrollLeft <= 0){GetObj("ISL_Cont_c").scrollLeft = GetObj
("ISL_Cont_c").scrollLeft + GetObj("List01").offsetWidth}
GetObj("ISL_Cont_c").scrollLeft -= Space_c ;
}
function ISL_GoDown_c(){ //下翻
clearInterval(MoveTimeObj_c);
if(MoveLock_c) return;
clearInterval(AutoPlayObj_c);
MoveLock_c = true;
ISL_ScrDown_c();
MoveTimeObj_c = setInterval("ISL_ScrDown_c()",Speed_c);
}
function ISL_StopDown_c(){ //下翻停止
clearInterval(MoveTimeObj_c);
if(GetObj("ISL_Cont_c").scrollLeft % PageWidth_c - fill_c != 0 ){
Comp_c = PageWidth_c - GetObj("ISL_Cont_c").scrollLeft % PageWidth_c + fill_c;
CompScr_c();
}else{
MoveLock_c = false;
}
AutoPlay_c();
}
function ISL_ScrDown_c(){ //下翻动作
if(GetObj("ISL_Cont_c").scrollLeft >= GetObj("List01").scrollWidth){GetObj("ISL_Cont_c").scrollLeft =
GetObj("ISL_Cont_c").scrollLeft - GetObj("List01").scrollWidth;}
GetObj("ISL_Cont_c").scrollLeft += Space_c ;
}
function CompScr_c(){
var num_c;
if(Comp_c == 0){MoveLock_c = false;return;}
if(Comp_c < 0){ //上翻
if(Comp_c < -Space_c){
   Comp_c += Space_c;
   num_c = Space_c;
}else{
   num_c = -Comp_c;
   Comp_c = 0;
}
GetObj("ISL_Cont_c").scrollLeft -= num_c;
setTimeout("CompScr_c()",Speed_c);
}else{ //下翻
if(Comp_c > Space_c){
   Comp_c -= Space_c;
   num_c = Space_c;
}else{
   num_c = Comp_c;
   Comp_c = 0;
}
GetObj("ISL_Cont_c").scrollLeft += num_c;
setTimeout("CompScr_c()",Speed_c);
}
}
</script>
</body></html>

提示：您可以先修改部分代码再运行

javascript学习指南_Javascript控制图片向左向右滚动代码(兼容FF、IE)

http://m.bbyears.com/wangyezhizuo/44827.html

推荐访问:

上一篇：【js监听操作iframe】js监听操作iframe 滚动事件详解

下一篇：js大图片|Js大图带小图焦点图效果代码

相关阅读猜你喜欢

本类排行本类最新