如何使用jquery从左到右或从右到左滑动图像？

Question

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. 请指导我如何获得滑动r-to-l效果。 I know i can slide up/down using jquery.. but how to do it lr or rl? 我知道我可以使用jquery上下滑动..但是怎么做lr或rl？

Thanks! 谢谢！

Answer 1

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>

Answer 2

Will Slide works for you? Will Slide适合你吗？

$("div").click(function () {
      $(this).hide("slide", { direction: "left" }, 1000);
});

如何使用jquery从左到右或从右到左滑动图像？

问题描述

2 个解决方案

解决方案1
6 2011-10-19 10:18:20

解决方案2
0 2011-10-19 10:09:16

如何使用jquery从左到右或从右到左滑动图像？

问题描述

2 个解决方案

解决方案1 6 2011-10-19 10:18:20

解决方案2 0 2011-10-19 10:09:16

解决方案1
6 2011-10-19 10:18:20

解决方案2
0 2011-10-19 10:09:16