滑動關閉的div使用jQuery +添加導航箭頭

Question

任何人都可以與添加導航箭頭找到這裏的代碼片段

Slide a div offscreen using jQuery 和給出的第一個答案幫助屏幕.... http://jsfiddle.net/jtbowden/ykbgT/2/

我想成爲能夠添加的方向箭頭或上/下一個鏈接

代碼下面

HTML：

<div id="container"> 

    <div id="box1" class="box">Div #1</div> 
    <div id="box2" class="box">Div #2</div> 
    <div id="box3" class="box">Div #3</div> 
    <div id="box4" class="box">Div #4</div> 
    <div id="box5" class="box">Div #5</div> 

</div> 

CSS：

body { 
    padding: 0px;  
} 

#container { 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.box { 
    position: absolute; 
    width: 50%; 
    height: 300px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    left: 150%; 
    top: 100px; 
    margin-left: -25%; 
} 

#box1 { 
    background-color: green; 
    left: 50%; 
} 

#box2 { 
    background-color: yellow; 
} 

#box3 { 
    background-color: red; 
} 

#box4 { 
    background-color: orange; 
} 

#box5 { 
    background-color: blue; 
} 

的javascript：

$('.box').click(function() { 

    $(this).animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#container'); 
    }); 

    $(this).next().animate({ 
     left: '50%' 
    }, 500); 
}); 

它出色的作品，但導航是一個方向，然後通過單擊框提前

感謝

AOR

激活

Answer 1

應該很容易做到:)

做一個 「導航控制」 包裝元素：

var $controller = $('<div class="control-wrapper" />); 

加2個的主要元件用作左，右移動按鈕：

var $left = $('<span class="move left" />').appendTo($controller), 
    $right = = $('<span class="move right"/>').appendTo($controller); 

加每個動畫的每個移動元素的事件處理程序：

$left.click(function(event) { 
////MOVE THE NAV LEFT 
}; 

$right.click(function(event) { 
////MOVE THE NAV RIGHT 
}; 

取代評論與函數調用移動導航（你已經將它移到左邊的邏輯;））

注意：請確保您添加「光標：指針」的按鈕元素的CSS類，以使其似乎是可點擊給用戶的。

Answer 2

如果有人對此感興趣，對於類似問題的更詳細的答案，完美的作品！ jQuery animate divs on/off screen sequentially with navigation arrows