|
|
復制代碼 代碼如下:
<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="http://www.jb51.NET/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 不間斷的圖片滾動并可點擊，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
