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>

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

　　}

教程首页更多教程