javascript 不间断的图片滚动并可点击_Javascript教程-查字典教程网

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>

<<<<<

</div>

<div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</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);

}