下一个/上一个箭头循环通过div

-3

我想添加两个箭头到“箱子”divs（下面）的两侧循环3个div。下一个/上一个箭头循环通过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); 
     }   
    }); 
});

来源

2015-05-16 Augustine Kodom

您好。这个问题的格式不适用于SO。请阅读发布指南：http://stackoverflow.com/help/how-to-ask – grill

我不认为它是“不合适的”，但它确实表现出一点懒惰。 – Roberto

添加箭头到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/

更新瓦特/箭头迁出的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/

来源

2015-05-16 19:39:47 errata

我想让箭头在div之外。 –

已更新的答案。 – errata

勘误表给你一个很好的解决方案。只需将他的代码连接到下面代码段中的箭头即可。

运行段查看：

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

来源

2015-05-16 19:57:53 Roberto

下一个/上一个箭头循环通过div

回答

相关问题