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

问题描述：

我想要建立一个简单的图像滑块我的网页，这里就是我想出了使用jQuery代码，CSS -如何将图像从左到右或从右到左滑动使用jquery？

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

虽然代码工作并显示图像，我想通过让新图像滑入“容器”窗格来为其添加更多效果。就像从正确的方向滑动到左边，然后在那里停留一段时间，然后下一个图像通过从右向左滑动来替换现有的图像。

请指导我如何获得滑动r-to-l效果。我知道我可以向上/向下滑动使用jquery ..但如何做到这一点l-r或r -l？

谢谢！

答

请问Slide适合你吗？

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

答

Click here to view example I knocked up. You can easily change the code to work on a timed interval:

$(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

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

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

相关推荐