按钮单击 show den div 隐藏 prev div 像滑块答案

【问题标题】：Button click show den div hide prev div like slider按钮单击 show den div 隐藏 prev div 像滑块
【发布时间】：2014-10-12 20:40:44
【问题描述】：

您好，我想在单击按钮时创建类似滑块的东西，显示下一个 div 并用 3 个 div 隐藏上一个 div。

HTML：

<a href="#"><i class="fa fa-chevron-left"></i></a>
<a href="#"><i class="fa fa-chevron-right"></i></a>
<div class="divs">
    <div>1</div>
    <div> 2</div>
    <div> 3</div>
</div>

jQuery:

$(document).ready(function () {      
    $(".fa-chevron-right").click(function (e) {});
    $(".fa-chevron-left").click(function (e) {});
});

【问题讨论】：

来吧伙计...那里有 1000 多个滑块脚本和教程。至少尝试一下。显示的代码完全没有任何作用，而且研究工作很少
jquery : how to show the next div and hide the present one 的可能重复项

标签： javascript jquery css function onclick

【解决方案1】：

您可以使用 jQuery 的 next()、prev() 和 siblings() 方法轻松完成它。我花了五分钟写了一些粗略的代码。

http://jsfiddle.net/85kcffo9/1/

希望它对您学习 jQuery 有所帮助。

【讨论】：

【解决方案2】：

    <html>
    <body>

    <head>
   <style>
    .divControl
   {
       position:absolute;
       width: 80px;
       height: 80px;
       -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
        border-radius: 20px;
    }
    </style>
   </head>
   <a href="#"><i class="fa fa-chevron-left">left</i></a>
   <a href="#"><i class="fa fa-chevron-right">right</i></a>
   <div class="divs"        
style="position:absolute;width:250px;height:80px;overflow:hidden;border: 3px #658958    solid;">
    <div id="wrapper" style="position:absolute;width:100%;height:100%;left:0px;top:0px;">
    <div class="divControl" style="left:0px;background:red">1</div>
    <div class="divControl" style="left:100px;background:blue"> 2</div>
    <div class="divControl" style="left:200px;background:green"> 3</div>
    </div>
    </div>


    <script>

      $(document).ready(function () {      
       $(".fa-chevron-right").click(function (e) {

       $( "#wrapper" ).animate({
       left: "+=70",
       opacity: 1
       }, 700 ); 

      });
      $(".fa-chevron-left").click(function (e) {

     $( "#wrapper" ).animate({
     left: "-=70",
     opacity: 1
    }, 700 );    

    });
     });
     </script>

     </body>
    </html>

【讨论】：