-1

連続JavaScriptスクローラー

次と前のクリックで動作している以下のスクリプトがあります。次と前のボタンアクションで左から右に、またはその逆に流れるようにこのJavaScriptを追加した約1〜3のdivがあります。

連続スクロールにしたいです。3番目の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>

js

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'>";   
    
  }
 }

}
4

1 に答える 1

2

このようなもの？

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-08T15:36:17.930 に答える