Question

你好我想在点击一个按钮显示下一个div时创建类似滑块的东西并隐藏带有3个div的prev 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) {});
});

Answer 1

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

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

希望在学习jQuery的过程中有所帮助。

Answer 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>

按钮单击显示den div隐藏prev div如滑块

2 个答案: