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 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
webpack 处理CSS资源的实现
Sep 27 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新手上路(五)
2006/10/09 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
推荐11个实用Python库
2015/01/23 Python
Python编程实现蚁群算法详解
2017/11/13 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
学校教师读书活动总结
2014/07/08 职场文书
行政文员岗位职责
2015/02/04 职场文书
门球健将观后感
2015/06/16 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Python合并多张图片成PDF
2021/06/09 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
Java设计模式之代理模式
2022/04/22 Java/Android
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis