下一個/上一個箭頭循環通過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

回答

相關問題