Geek Answers Handbook

How do I hide images from left to right or right to left using jquery?

I am trying to create a simple image slider for my web page, and here is the code I came up with 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 is working and displaying the images, I would like to add some more effects to it by adding a new image to the "container" area. Like shifted to the right to the right, and then staying there for a while, and then the next image replaces the existing one in it, again moving from right to left.

Tell me how to get the r-to-l sliding effect. I know I can slide up / down using jquery .. but how to do lr or rl?

Thanks!

+4
source share
2 answers

Click here to see an example I knocked out. You can easily change the code to work with a time interval:

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

 #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>
+6
source

Will Slide Work For You?

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

More articles:


All Articles