Javascript 我如何使用 jquery 从左到右或从右到左滑动图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7819508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do i slide images left to right or right to left using jquery?
提问by arun nair
I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css -
我正在尝试为我的网页构建一个简单的图像滑块，这是我使用 jquery、css 提出的代码 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
margin:0; padding:0;
}
#container{
position:absolute; left:100px; top:100px;
width:102px;height:102px;
border:1px solid red;
overflow:hidden; display:inline;
}
#container img{float:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
setInterval(slideImages, 5000);
function slideImages(){
$('#container img:first-child').clone().appendTo('#container');
$('#container img:first-child').remove();
}
});
</script>
</head>
<body>
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.
当代码运行并显示图像时，我想通过将新图像滑入“容器”窗格来为其添加更多效果。就像从右向左滑动，然后在那里停留一段时间，然后下一张图像再次从右向左滑动来替换现有图像。
Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?
请指导我如何获得滑动 r-to-l 效果。我知道我可以使用 jquery 向上/向下滑动 .. 但如何做到 lr 或 rl？
Thanks!
谢谢！
回答by rickyduck
Click here to view example I knocked up. You can easily change the code to work on a timed interval:
单击此处查看我敲的示例。您可以轻松更改代码以在定时间隔内工作：
JS
JS
$(document).ready(function(){
$('#rotator > a.arrow.left').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});
});
});
CSS
CSS
#rotator{width:310px; height:220px; position:relative; overflow:hidden; position:relative;}
#rotator .images{width:1000%; position:relative; z-index:1;}
#rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px; background:#FFF;}
#rotator a.arrow.left{left:0;}
#rotator a.arrow.right{right:0;}
#rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}
#rotator .images .imageHolder span {width:290px; margin: 10px; color:#FFF; font-size:18px; position:absolute; top:0; left:0; z-index:4;}
#rotator .images .imageHolder img{width:310px; height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}
HTML
HTML
<!DOCTYPE html>
<html>
<body>
<div id="rotator">
<a href="#" class="arrow left"></a>
<div class="images">
<div class="imageHolder">
<span>Image Number 1</span>
<img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 2</span>
<img src="http://www.jpl.nasa.gov/images/wise/20100217/pia12832-browse.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 3</span>
<img src="http://www.boingboing.net/images/_images__wikipedia_commons_a_aa_Polarlicht_2.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 4</span>
<img src="http://www.aviation-images.com/user/zooms/118/451nw/aviation-images.com21079968wm.jpg?d=1179938582" alt="" />
</div>
</div>
<a href="#" class="arrow right"></a>
</div>
</body>
</html>
