Jquery滑塊控件

-1

我想構建一個內容滑塊，該滑塊左右兩側有一個箭頭進行導航。我想要設置滑塊的位置+ 100px（當你點擊右鍵）和-100像素（當你點擊左鍵時）。此功能起作用。Jquery滑塊控件

但是，如果出現錯誤，我想禁止它在達到某個x位置值時移動。所以當我的內容到達結尾時，它必須停止，以便用戶只能回溯。

希望你能幫助我，因爲我找不到它。

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

好吧（我從我的假期回來），我正在檢查腳本。除了一件事以外，其中的一件作品......當#slider比它停止工作的容器更寬時 – Odee 2012-03-11 13:54:45

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滑塊控件

回答

相關問題