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>

javaの

$("#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

（私の休暇から戻ってきました）私はスクリプトをチェックしています。 1つのことを除いて動作するもの... #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

答えて

関連する問題