Javascript 如何使用jquery从左向右或从右向左滑动图像？_Javascript_Jquery_Css_Image_Slider

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

javascript jquery css image

Javascript 如何使用jquery从左向右或从右向左滑动图像？,javascript,jquery,css,image,slider,Javascript,Jquery,Css,Image,Slider,我正在尝试为我的网页构建一个简单的图像滑块，下面是我使用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">&l

我正在尝试为我的网页构建一个简单的图像滑块，下面是我使用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>


*{
边距：0；填充：0；
}
#容器{
位置：绝对；左侧：100px；顶部：100px；
宽度：102px；高度：102px；
边框：1px纯红；
溢出：隐藏；显示：内联；
}
#容器img{float:left；}
$（文档）.ready（函数（）{
设置间隔（滑动图像，5000）；
函数slidemages（）{
$（“#容器img:first child”）.clone（）.appendTo（“#容器”）；
$（“#容器img:first child”）.remove（）；
}
});

当代码运行并显示图像时，我想通过将新图像滑入“容器”窗格来添加一些效果。比如从右向左滑动，然后在那里停留一段时间，然后下一个图像通过再次从右向左滑动来替换现有图像

请指导我如何获得r-to-l滑动效果。我知道我可以使用jquery向上/向下滑动。。但是怎么做呢，l-r还是r-l

谢谢

对你有用吗

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

$(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"});
            });
        });

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

CSS

$(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"});
            });
        });

#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

<!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>


图像1
图像2
图像3
图4