js圖片向右一張張滾動(dòng)效果實(shí)例代碼
更新時(shí)間:2013年11月23日 15:26:52 作者:
這篇文章主要介紹了js圖片向右一張張滾動(dòng)效果實(shí)例代碼,有需要的朋友可以參考一下
先來張效果圖
樣式
復(fù)制代碼 代碼如下:
#div_left{float:left;width:60px;height:86px;}
#starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}
#starScroll #contentScroll{width:500%}
#starScroll #ScrollOne{float:left;}
#starScroll #ScrollOne a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
#starScroll #ScrollOne img{width:204px;height:188px;border:0px;}
#starScroll #ScrollTwo{float:left;}
#starScroll #ScrollTwo a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
#starScroll #ScrollTwo img{width:204px;height:188px;border:0px;}
#div_right{float:left;width:60px;height:86px;}
.arrow{background:url(images/arrow.png) no-repeat;cursor:pointer;height:86px;width:60px;cursor:pointer;display:block;margin-top:50px;}
.prev{background-position:left top;}
.prev:hover{background-position:left bottom;}
.next{background-position:right top;}
.next:hover{background-position:right bottom;}
html代碼
復(fù)制代碼 代碼如下:
<div>
<div id="div_left">
<span id="btn_left" class="arrow prev"></span>
</div>
<div id="starScroll">
<div id="contentScroll">
<div id="ScrollOne">
<a href="#" title="1"><img src="images/1.jpg" /></a>
<a href="#" title="2"><img src="images/2.jpg" /></a>
<a href="#" title="3"><img src="images/3.jpg" /></a>
<a href="#" title="4"><img src="images/4.jpg" /></a>
<a href="#" title="5"><img src="images/5.jpg" /></a>
<a href="#" title="6"><img src="images/6.jpg" /></a>
<a href="#" title="7"><img src="images/7.jpg" /></a>
<a href="#" title="8"><img src="images/8.jpg" /></a>
</div>
<div id="ScrollTwo"></div>
</div>
</div>
<div id="div_right">
<span id="btn_right" class="arrow next"></span>
</div>
</div>
JS代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Scroll=(function(){
return function(){
var starScroll = document.getElementById("starScroll"),
ScrollOne = document.getElementById("ScrollOne"),
aCollection = ScrollOne.getElementsByTagName("a"),
aLength = aCollection.length,
ScrollTwo = document.getElementById("ScrollTwo"),
btn_left = document.getElementById("btn_left"),
btn_right = document.getElementById("btn_right");
var Width = 204,Current = 1,Rate = 7,TimeTimeout=1000,TimeInterval=10,MarginRight=9;
var SInterval=null,STimeout=null;
var flag=true;
function ScrollLeft(){
var CountWidth = Current*Width+Current*MarginRight,
SLeftPara=starScroll.scrollLeft;
if(ScrollTwo.offsetWidth-SLeftPara==0){
starScroll.scrollLeft=0;
Current=0;
}
if(CountWidth-SLeftPara==0){
Forward();
}
else{
var v = Math.round((CountWidth-SLeftPara)/Rate);
v = v<1 ? 1 : v;
SetScrollLeft(SLeftPara+v);
}
}
function SetScrollLeft(scrollleft){
starScroll.scrollLeft=scrollleft;
}
function Init(){
flag=false;
SInterval=setInterval(ScrollLeft,TimeInterval);
}
function Forward(){
clearInterval(SInterval);
Current++;
flag=true;
STimeout = setTimeout(Init,TimeTimeout);
}
btn_right.onclick=function(){
if(flag){
clearTimeout(STimeout);
Init();
}
}
function ScrollRight(){
var CountWidth = Current*Width+Current*MarginRight,
SLeftPara = starScroll.scrollLeft;
if(CountWidth-SLeftPara==0){
Forward();
}
else{
var v = Math.round((CountWidth-SLeftPara)/Rate);
v = v>-1?-1:v;
SetScrollLeft(SLeftPara+v);
}
}
btn_left.onclick=function(){
if(!flag){
return;
}
flag=false;
clearTimeout(STimeout);
if(Current==1){
SetScrollLeft(ScrollTwo.offsetWidth);
Current=aLength+1;
}
Current-=2;
SInterval = setInterval(ScrollRight,TimeInterval);
}
if(aLength>0){
starScroll.scrollLeft=0;
ScrollTwo.innerHTML = ScrollOne.innerHTML;
STimeout = setTimeout(Init,TimeTimeout);
}
}
})();
Scroll();
</script>
您可能感興趣的文章:
相關(guān)文章
TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
眾所周知TypeScript是一種由微軟開發(fā)的自由和開源的編程語(yǔ)言。它是JavaScript的一個(gè)超集,而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?,下面這篇文章主要介紹了TypeScript中強(qiáng)制類型的轉(zhuǎn)換,需要的朋友可以參考借鑒下。2016-12-12微信 java 實(shí)現(xiàn)js-sdk 圖片上傳下載完整流程
這篇文章主要介紹了微信 java 實(shí)現(xiàn)js-sdk 圖片上傳下載完整流程的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript在多瀏覽器下for循環(huán)的使用方法
JavaScript語(yǔ)言在不同的瀏覽器的下有存在細(xì)微的差異,但不像DOM操作差異那么大,現(xiàn)在為大家列舉出其中一個(gè)"for循環(huán)"的差異,并介紹如何有效的解決這種差異2012-11-11移動(dòng)端H5開發(fā) Turn.js實(shí)現(xiàn)很棒的翻書效果
這篇文章主要為大家詳細(xì)介紹了Turn.js實(shí)現(xiàn)很棒的翻書效果,對(duì)Turn.js翻書效果的實(shí)現(xiàn)進(jìn)行總結(jié),感興趣的小伙伴們可以參考一下2016-06-06基于JavaScript實(shí)現(xiàn)選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)選項(xiàng)卡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07javascript和jquery實(shí)現(xiàn)用戶登錄驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了javascript和jquery分別實(shí)現(xiàn)用戶登錄驗(yàn)證的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05