首页 新闻 搜索 专区 学院

不间断图片幻灯片 scrollLeft改变问题

0
悬赏园豆:20 [已解决问题] 解决于 2010-12-02 15:56

  最近做了一个图片幻灯片,要实现不间断的图片的播放问题,我在网上搜到了代码,想模仿者自己写,但是看不太明白,有一点点迷惑。代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Utf-8">
<title>Untitled Document</title>
<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>
</head>
<body>
<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="http://www.baidu.com/img/baidu_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>
<script type="text/javascript">
//速度(毫秒)
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);
}
}
</script>
</body>
</html>

  我想知道,里面的Js是把一个#List1里面的内容复制到#List2里面了,这个有什么作用,还有,里面最主要的代码不就是scrollLeft的改变吗?这个scrollLeft有什么作用?我以前也写过类似的东西,但是scrollLeft就是照着别人的用的,实际上并不了解他的真实的意思,还望哪一位讲解一下……还有,加入这一个效果不用复制代码 不要#LIst2可不可以?难道不可以用ul li 做吗?为什么我用ul的话他的scrollLeft不会改变呢?scrollLeft改变还需要什么特定的环境吗?很迷茫,还希望哪一位了解的帮帮忙,在下不胜感激……谢谢了……

 

问题补充: 哎,看来没有人回答我的问题啊,怎么回事呢?就是一个scrollLeft的问题,我不太明白ScrollLeft的用法,哪一位明白了给在下讲一讲啊,举几个例子,帮帮忙吧,谢谢各位了……
日心尧亘的主页 日心尧亘 | 菜鸟二级 | 园豆:235
提问于:2010-10-25 19:26
< >
分享
最佳答案
0

Js是把一个#List1里面的内容复制到#List2里面了,主要是为了实现循环。他这个代码使用的是对DIV进行了移动的,所以他没有办法实现循环显示,所以他将#List1的内容放到#List2中,并让#List2放在#List1,当移动#List1可以显示连续的效果

收获园豆:20
三月软件工作室——任忌 | 小虾三级 |园豆:524 | 2010-12-02 14:02
其他回答(1)
0

代码太多看得心烦,直接拷贝现成的修改下不是很好吗,好多幻灯片给你推荐下,呵呵

http://www.100sucai.com/code/867.html

1565783227 | 园豆:227 (菜鸟二级) | 2014-08-18 12:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册