javascript 不间断的图片滚动并可点击


Posted in Javascript onJanuary 15, 2010

css:

<style type="text/css"> 
.rollBox 
{ 
width: 704px; 
overflow: hidden; 
padding: 12px 0 5px 6px; 
} 
.rollBox .LeftBotton 
{ 
height: 52px; 
width: 19px; 
background: url(jt.gif) no-repeat 11px 0; 
overflow: hidden; 
float: left; 
display: inline; 
margin: 25px 0 0 0; 
cursor: pointer; 
background-color:Blue; 
color:White; 
} 
.rollBox .RightBotton 
{ 
height: 52px; 
width: 20px; 
background: url(jt.gif) no-repeat -8px 0; 
overflow: hidden; 
float: left; 
display: inline; 
margin: 25px 0 0 0; 
cursor: pointer; 
background-color:Blue; 
color:White; 
} 
.rollBox .Cont 
{ 
width: 663px; 
overflow: hidden; 
float: left; 
} 
.rollBox .ScrCont 
{ 
width: 10000000px; 
} 
.rollBox .Cont .pic 
{ 
width: 132px; 
float: left; 
text-align: center; 
} 
.rollBox .Cont .pic img 
{ 
padding: 4px; 
background: #fff; 
border: 1px solid #ccc; 
display: block; 
margin: 0 auto; 
} 
.rollBox .Cont .pic p 
{ 
line-height: 26px; 
color: #505050; 
} 
.rollBox .Cont a:link, .rollBox .Cont a:visited 
{ 
color: #626466; 
text-decoration: none; 
} 
.rollBox .Cont a:hover 
{ 
color: #f00; 
text-decoration: underline; 
} 
.rollBox #List1, .rollBox #List2 
{ 
float: left; 
} 
</style>

html代码
<div class="rollBox"> 
<div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"> 
<<<<< 
</div> <div class="Cont" id="ISL_Cont"> 
<div class="ScrCont"> 
<div id="List1"> 
<!-- 图片列表 begin --> 
<div class="pic"> 
<a href="####"> 
<img src="https://3water.com/images/logo.gif" width="109" height="87" /></a> 
<a href="####">商品1</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品2</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品3</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品4</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品5</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品6</a> 
</div> 
<div class="pic"> 
<a href="####"> 
<img src="http://www.baidu.com/img/baidu_logo.gif" width="109" height="87" /></a> 
<a href="####">商品7</a> 
</div> 
<!-- 图片列表 end --> 
</div> 
<div id="List2"> 
</div> 
</div> 
</div> 
<div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"> 
>>>>>> 
</div> 
</div>

JS代码
//速度(毫秒) 
var Speed = 10; 
//每次移动(px) 
var Space = 5; 
//每次翻页宽度 
var PageWidth = 132; 
//整体移位(px) 
var fill = 0; 
//是否自动移动,true 移动,false 不移动 
var MoveLock = false; 
//移动时间对象 
var MoveTimeObj; 
//上翻 下翻 变量,当comp小于0 为上翻动 反之为下翻动 
var Comp = 0; 
//上下移动对象 
var AutoPlayObj = null; 
//将div List1中的所有元素分配给 div list2中 
GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
//向左移动 
GetObj('ISL_Cont').scrollLeft = fill; 
//给div ISL_Cont 绑定鼠标移动在div上方时候的事件,该事件是清除自动播放的,当鼠标移动到div图片上时候将取消自动播放 
GetObj("ISL_Cont").onmouseover = function(){ clearInterval(AutoPlayObj); } 
//给div ISL_Cont 绑定鼠标移开div上方时候的时间,该事件是绑定自动播放的,当鼠标移开div图片上时候将又开始自动时间间隔自动播放 
GetObj("ISL_Cont").onmouseout = function(){ AutoPlay();} 
//第一次进来默认绑定为自动播放 
AutoPlay(); 
/* 
获取指定html对象 
*/ 
function GetObj(objName){ 
//判断当前页面中是否存在有效的元素标记,document.getElementById兼容火狐 
if(document.getElementById) 
{ 
return eval('document.getElementById("'+objName+'")') 
} 
else 
{ 
return eval('document.all.'+objName) 
} 
} 
/* 
自动滚动 
*/ 
function AutoPlay(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(AutoPlayObj); 
//重新绑定间隔时间滚动,setInterval()方法是绑定在指定的时间执行,clearInterval()方法是清除指定的时间绑定对象 
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000); 
} 
/* 
上翻开始 
*/ 
function ISL_GoUp(){ 
//如过当前为自动播放将不执行下面代码 
if(MoveLock) 
return; 
//清除以前绑定的间隔时间滚动 
clearInterval(AutoPlayObj); 
MoveLock = true; 
//在指定的时间中自动往左侧移动 
MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
} 
/* 
上翻停止 
*/ 
function ISL_StopUp(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(MoveTimeObj); 
//判断当前论显图片的div做边的变距是否是第一个商品图片,不等于0不是第一个,反之等于第一张图片 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) 
{ 
//div左边距移动 
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth); 
//开始移动 
CompScr(); 
}else 
{ 
MoveLock = false; 
} 
//自动播放 
AutoPlay(); 
} 
/* 
上翻动作 
*/ 
function ISL_ScrUp(){ 
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度 
if(GetObj('ISL_Cont').scrollLeft <= 0) 
{ 
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth; 
} 
//往左侧移动 
GetObj('ISL_Cont').scrollLeft -= Space ; 
} 
/* 
下翻 
*/ 
function ISL_GoDown(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(MoveTimeObj); 
//如过当前为自动播放将不执行下面代码 
if(MoveLock) 
return; 
//清除自动播放 
clearInterval(AutoPlayObj); 
MoveLock = true; 
//下翻方法 
ISL_ScrDown(); 
//在指定的时间中自动往右侧移动 
MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
} 
/* 
下翻停止 
*/ 
function ISL_StopDown(){ 
//清除以前绑定的间隔时间滚动 
clearInterval(MoveTimeObj); 
//如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度 
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ) 
{ 
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill; 
CompScr(); 
}else 
{ 
MoveLock = false; 
} 
//开始自动播放 
AutoPlay(); 
} 
/* 
下翻动作 
*/ 
function ISL_ScrDown(){ 
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) 
{ 
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth; 
} 
GetObj('ISL_Cont').scrollLeft += Space; 
} 
/* 
左右移动控制处理 
*/ 
function CompScr(){ 
var num; 
if(Comp == 0) 
{ 
MoveLock = false; 
return; 
} 
//上翻 
if(Comp < 0) 
{ 
if(Comp < -Space) 
{ 
Comp += Space; 
num = Space; 
}else 
{ 
num = -Comp; 
Comp = 0; 
} 
GetObj('ISL_Cont').scrollLeft -= num; 
setTimeout('CompScr()',Speed); 
}else //下翻 
{ 
if(Comp > Space) 
{ 
Comp -= Space; 
num = Space; 
}else 
{ 
num = Comp; 
Comp = 0; 
} 
GetObj('ISL_Cont').scrollLeft += num; 
setTimeout('CompScr()',Speed); 
} 
}
Javascript 相关文章推荐
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
海量经典的jQuery插件集合
Jan 12 #Javascript
You might like
PHP命名空间与自动加载类详解
2018/09/04 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
django实现前后台交互实例
2017/08/07 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python 爬虫性能相关总结
2020/08/03 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
打架检讨书50字
2014/01/11 职场文书
服装采购员岗位职责
2014/03/15 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
预防煤气中毒方案
2014/06/16 职场文书
导航工程专业自荐信
2014/09/02 职场文书
售后客服个人自我评价
2014/09/14 职场文书
企业2014年度工作总结
2014/12/10 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Golang中channel的原理解读(推荐)
2021/10/16 Golang