Question

我想在＆＃34;框＆＃34;的两侧添加两个箭头。 div（下面）循环显示3个div。

使用JSFiddle：https://jsfiddle.net/HBHcC/11/

有人可以帮我这个吗？

HTML：

<div class="container">
    <div class="boxes">
        <div class="one box">
        </div>
        <div class="two box">
        </div>
        <div class="three box">
        </div>
    </div>
</div>

CSS：

.container{
    width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
}

.box {
    display:inline-block;
    float: left;
    width: 100px;
    height: 100px;
}
.one{
    background-color:green;
}
.two{
    background-color:red;
}
.three{
    background-color:blue;
}
.boxes{
    width:400px;
}

JS：

$(document).ready(function(){
    $('.box').on("click", function() {
        // Is this the last div, or is there a next one?
        if ($(this).next().length) {            
            var animSpeed = 200;  // Make this 0 for an instant change
            $('.boxes').animate({marginLeft : "-=100"}, animSpeed);
        }        
    });
});

Answer 1

向div添加箭头后，这里有一个新的小提琴，可以帮助你开始：

   $('.rightarrow').on("click", function() {
      // Is this the last div, or is there a next one?
      var animSpeed = 200;  // Make this 0 for an instant change
      $('.boxes').animate({marginLeft : "-=100"}, animSpeed);     
   });

   $('.leftarrow').on("click", function() {
      // Is this the last div, or is there a next one?
      var animSpeed = 200;  // Make this 0 for an instant change
      $('.boxes').animate({marginLeft : "+=100"}, animSpeed);
   });

https://jsfiddle.net/tx2yg06w/1/

更新了w /箭头移出div：

$(document).ready(function(){
  var animSpeed = 200;
  $('.rightarrow').on("click", function() {
    if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
    $('.boxes').animate({marginLeft : "-=100"}, animSpeed);     
  });

  $('.leftarrow').on("click", function() {
    if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
    $('.boxes').animate({marginLeft : "+=100"}, animSpeed);
  });
});

https://jsfiddle.net/b56r0d72/

Answer 2

勘误为您提供了一个很好的解决方案。只需将他的代码连接到下面代码段中的箭头即可。

运行代码段以查看：

＆＃13;

<html>
<body>
<style type="text/css">
  .leftarrow, .rightarrow {
    font-size: 48px;
    color: blue;
    text-decoration: none;
  }
  .rightarrow {
    color: red;
    float: right;
   }
  .content {
    width: 200px;
    padding: 4px;
    border: 1px gray solid;
  }
  .box {
    height: 200px;
    border: 1px green solid;
   }
</style>
  
  
<div class="content">
  
  <div>
      <a href="javascript:void(0)" class="leftarrow" title="back">&#9664;</a>
      <a href="javascript:void(0)" class="rightarrow" title="forward"> &#9654;</a>
  </div>
 <div class="box">slide</div>
</div>
  
</body>
</html>

＆＃13;

下一个/上一个箭头循环显示div

2 个答案: