캐 러셀 주위의 JavaScript 랩

Question

js 컨베이어 갤러리 주위에 사용자 정의 랩을 만드는 방법에 대한 프런트 엔드 전문가의 정보를 찾고 있습니다. 아이디어는 간단합니다. 실제로 이미지, 텍스트 등의 회전식 컨베이어가 있습니다. 끝까지 가면 둘러 볼 수 있습니다. 나는 콘텐츠가 단순히 다음 페이드 인으로 페이드 인 및 페이드 아웃하는 것을 원하지 않는다. 이것은 현재 Div의 갤러리이지만 이미지가 있거나 무엇이든간에 있다고 가정합니다.

HTML

<div id="outside-container"> 
    <div id="inside-container" class="cf"> 
    <div class="items" id="item1"></div> 
    <div class="items" id="item2"></div> 
    <div class="items" id="item3"></div> 
    <div class="items" id="item4"></div> 
    </div> 
</div> 

<div id="directions"> 
    <h4 id="left-button">Left</h4> 
    <h4 id="right-button">Right</h4> 
</div> 

CSS

#outside-container{ 
    display: block; 
    width: 400px; 
    height: 125px; 
    overflow: hidden; 
    border: 1px solid #000; 
    margin: 0px auto; 
} 
#inside-container{ 
    display: block; 
    width: 800px; 
    overflow: hidden; 
    height: 100%; 
} 

.items{ 
    float: left; 
    margin: 0px; 
    width: 200px; 
    height: 100%; 
} 
#item1{ background: green; } 
#item2{ background: red; } 
#item3{ background: blue; } 
#item4{ background: yellow; } 

#directions{ 
    display: block; 
    width: 400px; 
    margin: 0px auto; 
    text-align: center; 
} 

#left-button, #right-button{ 
    display: inline-block; 
    cursor: pointer; 
    margin: 10px; 
} 

여기 JS

var move = 0; 
$("#left-button").click(function(){ 
    move += 200; 
    $("#inside-container").animate({ 
     marginLeft: move+"px" 
    }, 500); 
}); 

$("#right-button").click(function(){ 

    move -= 200; 
    $("#inside-container").animate({ 
     marginLeft: move+"px" 
    }, 500); 
}); 

는,767이고. 그래서이 모든 것들을 합산하십시오. 나는 갤러리를위한 무한 루프를 만드는 방법을 요구하고있다. 나는 항상 이런 종류의 일들을 끝내기 위해 프로그래밍했고, 그 다음에 사용자는 다른 방향으로 돌아 가야한다. 혼란스럽게 들리면 코덱을 확인하십시오. 미리 감사드립니다. 기본 슬라이더 마진 리셋 양

Answer 1

당신이 갈

http://codepen.io/nickavi/pen/cpFCE

그러나 하나님을 사랑하기 때문에 jQ를 사용하지 마십시오. uery animate ... 적어도 velocity.js 또는 GSAP 플러그인을 추가하면 방금 추가 한 JS를 변경할 필요가 없으며보다 효율적인 애니메이션 기능으로 바뀝니다.

건배 JBSTEW

Answer 2

먼저 설정된 이동 :

var move = 200; 

그리고, move만큼 왼쪽으로 밀어 컨테이너 마진 세트 : 다음

var margin_reset = (move * -1) + 'px' 
$("#inside-container").css('margin-left', margin_reset); 

애니메이션 마진을 조정 move 변수를 다시 사용하여 슬라이드하고 애니메이션이 완료되면 마지막/첫 번째 항목을 앞/뒤를 사용하여 컨테이너의 시작/끝으로 이동시키는 함수를 실행합니다.

$("#left-button").click(function(){ 
    $("#inside-container").animate({ 
     marginLeft: 0 
    }, 500, function() { 
     $(this).prepend($(this).find('.items:last')) 
     .css('margin-left', margin_reset); 
    }); 
}); 

$("#right-button").click(function(){ 
    $("#inside-container").animate({ 
     marginLeft: (move * -2) +"px" 
    }, 500, function() { 
     $(this).append($(this).find('.items:first')) 
     .css('margin-left', margin_reset); 
    });  
}); 

초기 무승부 점프를 방지하기 위해 기본 CSS를 변경할 수 #inside-container 등 :

#inside-container{ 
    ... 
    margin-left: -200px; 
} 

참조 : 여기 Codepen