Jquery slider controle

-1

탐색 할 화살표가 왼쪽과 오른쪽에있는 콘텐츠 슬라이더를 만들고 싶습니다. 슬라이더 + 100px (오른쪽 클릭)와 -100px (왼쪽 클릭)의 위치를 설정하고 싶습니다. 이 기능은 작동합니다.Jquery slider controle

하지만 잘못된 점은 특정 x 위치 값에 도달했을 때 이동을 비활성화하려는 것입니다. 따라서 내 콘텐츠가 끝나면 euser가 다시 탐색 할 수 있도록 중지해야합니다.

내가 찾을 수 없기 때문에 나를 도울 수 있기를 바랍니다.

CSS

#container{ 
    width: 500px; 
    height: 150px; 
    background:#CDFAA8; 
    overflow:hidden; 
    position:absolute; 
    left: 13px; 
    } 

#slider{ 
    width: 200px; 
    height: 150px; 
    background:#063; 
    position:absolute; 
    left: 0px; 
} 

#block1{ 
    width: 100px; 
    height: 150px; 
    background:#067; 
    float: left; 
} 

#block2{ 
    width: 100px; 
    height: 150px; 
    background:#079; 
    float: left; 
} 

#move_right{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    right:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 

#move_left{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    left:0px; 
    z-index: 200; 
    opacity: 0.2; 
}

HTML

<div id="container"> 
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div> 
<div id="slider"> 

    <div id="block1"></div>  
    <div id="block2"></div> 

</div> 
</div>

자바

$("#right").click(function() { 
     $("#slider").animate({ 
      "left": "+=100px" 
      }, "slow"); 
}); 

$("#left").click(function() { 
     $("#slider").animate({ 
      "left": "-=100px" 
     }, "slow"); 

});

출처

2012-02-26 Odee

-2

슬라이드 버튼을 클릭 할 때 몇 가지 확인을해야합니다.

여기 코드가 있습니다. 나는 폐쇄에 그것을 퍼트하고 "슬라이더"당신이 슬라이드 할 폭이 없기 때문에 그것은 동적, 단지 "단계"하드 코딩입니다 제작 :

(function($) { 
    var slider = $('#slider'), 
     step = 100, 
     left = parseInt(slider.css('left'), 10), 
     max = $('#container').width() - slider.width(), 
     min = 0; 

    $("#right").click(function() { 
     if (left < max) { 
      var newLeft = left+step; 
      left = (newLeft<max) ? newLeft : max; 
      $("#slider").animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 

    $("#left").click(function() { 
     if (left > 0) { 
      var newLeft = left - step; 
      left = (newLeft>min) ? newLeft : min; 
      slider.animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 
})(jQuery);

출처

2012-02-26 12:48:54 dievardump

(내 휴가에서 돌아 왔습니다) 스크립트를 확인하고 있습니다. #slider가 작업을 중단 한 컨테이너보다 너비가 더 큰 경우를 제외하면 어느 것이 작동합니까? – Odee

var L = parseInt($("#slider").css('left')); 

$("#right").click(function() { 
    if (L<400) { 
     $("#slider").animate({ 
      "left": "+=100px" 
      }, "slow"); 
     }); 
    } 

$("#left").click(function() { 
    if (L>0) { 
     $("#slider").animate({ 
      "left": "-=100px" 
      }, "slow"); 
     }); 
    }

출처

2012-02-26 12:29:34 adeneo

이 슬라이더의 최종 솔루션을 이었다

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#temp{ 
height: 300px; 
} 

#container{ 
    width: 500px; 
    height: 150px; 
    background:#CDFAA8; 
    overflow:hidden; 
    position:absolute; 
    left: 13px; 
    } 

#slider{ 
    width: 1300px; 
    height: 150px; 
    background:#063; 
    position:absolute; 
    left: 0px; 
} 

#block1{ 
    width: 100px; 
    height: 150px; 
    background:#067; 
    float: left; 
} 

#block2{ 
    width: 100px; 
    height: 150px; 
    background:#079; 
    float: left; 
} 

#move_right{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    right:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 

#move_left{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    left:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 
</style> 
</head> 

<body> 
<div id="temp"> 
<div id="container"> 
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div> 
<div id="slider"> 

    <div id="block1">1</div>  
    <div id="block2">2</div> 
    <div id="block1">3</div>  
    <div id="block2">4</div> 
    <div id="block1">5</div>  
    <div id="block2">6</div> 
    <div id="block1">7</div>  
    <div id="block2">8</div> 
    <div id="block1">9</div> 
    <div id="block2">10</div> 
    <div id="block1">11</div>  
    <div id="block2">12</div> 
    <div id="block1">13</div> 


</div> 
</div> 
</div>

JAVA

(function($) { 
    var slider = $('#slider'), 
     step = 500, 
     left = parseInt(slider.css('left'), 10), 
     max = $('#container').width() - slider.width(), 
     min = 0; 

    $("#left").click(function() { 
     if (left > max) { 
      var newLeft = left - step; 
      left = (newLeft>max) ? newLeft : max; 
      $("#slider").animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 

    $("#right").click(function() { 
     if (left < 0) { 
      var newLeft = left + step; 
      left = (newLeft<min) ? newLeft : min; 
      slider.animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 
})(jQuery);

출처

2012-03-11 20:49:52 Odee

Jquery slider controle

답변

관련 문제