Contineous Javascript Scroller - PullRequest
Новая
       8

Contineous Javascript Scroller

0 голосов
/ 08 декабря 2010

Непрерывный JavaScript Scroller

У меня ниже скрипт, который работает на следующий и предыдущий клик. Есть примерно 1–3 деления, для которых я добавил этот 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>

1010 * 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'>";   

  }
 }

}

1 Ответ

1 голос
/ 08 декабря 2010

Как то так? 

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;
}
...