Contineous的Javascript滾動條

-2

連續的JavaScript滾動條Contineous的Javascript滾動條

我有下面的腳本，正在工作的下一個和前一個點擊。有大約1到3個div，我已經添加了這個JavaScript從左到右流動，反之亦然，在下一個和上一個按鈕動作。

我想讓它連續滾動。第三個div滾動後應再次導航到第一個div。它不應該反向。流動應該連續不斷。

請諮詢解決方案來實現這一點。

<div id="mainContainer"> 
<!--mainContainer Div Start--> 
<div class="arrowRight"><img src="images/arrow_left.png" width="36" height="39"></div> 
<div class="arrowLeft"><img src="images/arrow_right_disable.png" width="36" height="39"> </div> 
    <div class="slider"> 
    <div class="slides"> <img src="images/1.jpg" width="250" height="250"></div> 
    <div class="slides"> <img src="images/2.jpg" width="250" height="250"></div> 
    <div class="slides"><img src="images/3.jpg" width="250" height="250"> </div> 
    </div> 
    <!--mainContainer Div End--> 
</div>

window.onload=init; 

function init(){ 

var arrowLeft=document.querySelector('.arrowLeft');  
var arrowRight=document.querySelector('.arrowRight');  
arrowRight.addEventListener('click',slideRight,false); 
arrowLeft.addEventListener('click',slideLeft,false); 

    var flag=1; 
    function slideRight(){ 
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(-1024px, 0px)'; 
    } 
    if(flag==3){ 
    arrowRight_div.innerHTML="<img src='images/arrow_left_disable.png' width='36'  
    height='39'>"; 
    } 
} 


    function slideLeft(){ 
    if(flag>1){ 
    flag--; 
    arrowRight_div.innerHTML="<img src='images/arrow_left.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(1024px, 0px)'; 
    } 
    if(flag==1){ 
    arrowLeft_div.innerHTML="<img src='images/arrow_right_disable.png' width='36' 
    height='39'>"; 

    } 
} 

}

來源

2010-12-08 user504023

究竟是什麼問題？ – 2010-12-08 15:14:02

我想創建連續滑塊。假設有三個div，一個接一個。當接下來的時候，它將需要2秒的div，然後另一個命中將採取第三格。在下一個按鈕之後的任何點擊之後，我應該能夠再次看到第一個div。循環三個divs。像1,2和3一樣，然後是1,2然後是3重複過程。上面的代碼工作正常，直到我達到第三格，之後，我禁用了下一次點擊。但是在這裏我想保持下一個按鈕的活動，並希望在下一次點擊時再次顯示1st div。它應該看起來連續的過程。 – user504023 2010-12-08 15:26:58

像這樣的事情？

var flag=1; 
function slideRight(){ 
    if(flag<3){ 
    flag++; 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(-1024px, 0px)'; 
} 
    if(flag==3){ 
    arrowLeft_div.innerHTML="<img src='images/arrow_right.png' width='36' height='39'>";  
    var slider=document.querySelector('.slider'); 
    slider.style.webkitTransform+='translate(2048px, 0px)'; 
    flag = 1; 
}

來源

2010-12-08 15:36:17 MrMisterMan

Contineous的Javascript滾動條

回答

相關問題