如何將圖像從左到右或從右到左滑動使用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？

謝謝！

來源

2011-10-19 arun nair

請問Slide適合你嗎？

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

來源

2011-10-19 10:09:16

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>

來源

2011-10-19 10:18:20 rickyduck

如何將圖像從左到右或從右到左滑動使用jquery？

回答

相關問題