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

回答

相关问题