使用jQuery +添加的导航箭头将div滑出屏幕(Slide divs off screen using jQuery + added navigation arrows)

使用jQuery +添加的导航箭头将div滑出屏幕(Slide divs off screen using jQuery + added navigation arrows)

任何人都可以帮助将导航箭头添加到此处的代码段

使用jQuery在屏幕外滑动div并给出第一个答案.... 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

Can anyone help with adding navigation arrows to the code snippet found here

Slide a div offscreen using jQuery and the first answer given .... http://jsfiddle.net/jtbowden/ykbgT/2/

I want to be able to add direction arrows or prev/next links

Code below

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); });

It works brilliantly but navigation is one direction and activated by clicking the boxes

thanks in advance

aor

最满意答案

应该很容易做:)

制作一个“导航控件”包装元素：

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

用函数调用替换注释来移动导航（你已经有了向左移动它的逻辑;））

注意：确保将“ cursor：pointer ”添加到按钮元素CSS类，以便它们看起来可以单击给用户。

Should be easy to do :)

make a "navigation control" wrapper element:

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

add 2 main elements to act as left and right movement buttons:

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

add an event handler to each movement element for each animation:

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

replace the comments with function calls to move the nav (you already have the logic to move it left ;) )

NOTE: Make sure you add "cursor: pointer" to the button element CSS classes so that they appear to be clickable to the user.