[jquery] image slider

**Jaynesh** · Jan 10, 2012 10:36

Hi

How can I create an image slider similar to the one on the tumblr login page?

**Immerse** · Jan 10, 2012 11:23

I see no sliding images on the login page @ Tumblr. What exactly are you referring too?

**muazzez** · Jan 10, 2012 15:21

I am new to Jquery.
This code is working in Firefox 4.0b9 and Konqueror 4.5.5

Code:

  
<html>
<html>
<head>
<meta charset="utf-8">
<title>hat sanatı örnekleri</title>
<style type="text/css">
#pano {position: absolute;top:161px; left: 100px;background-color:gold; border:10px solid gold; }
img { width: 161px; height: 100px;  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h3>click images</h3>
<div id="pano"> 
<img  id="r1" src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
<img  id="r2" src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
<img  id="r3" src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
<img  id="r4" src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
</div>

<script type="text/javascript">
//http://www.sitepoint.com/forums/showthread.php?817851-jquery-image-slider&
// http://www.w3schools.com/jquery/jquery_effects.asp
$(document).ready(function(){
$('#r2').hide();
$('#r3').hide();
$('#r4').hide();
});


$('#r1').click(function() {
$(this).hide(4000);
$('#r2').show(5000);
});
$('#r2').click(function() {
$(this).hide(2000);
$('#r3').show(7000);
});
$('#r3').click(function() {
$(this).hide(3000);
$('#r4').show(2000);
});
$('#r4').click(function() {
$(this).hide(5000);
$('#r1').show(6000);
});

</script>
</body>
</html>

I wrote
$(this).slideUp("slow");
instead of these
$(this).hide(number);

or
$(this).hide();
instead of these
$(this).hide(number);

and
$(this).show();
instead of these
$(this).show(number);

**muazzez** · Jan 11, 2012 03:59

using setTimeout
This code is working in Firefox 4.0b9 and Konqueror 4.5.5

Code:

  
<html>
<html>
<head>
<meta charset="utf-8">
<title>hat sanatı örnekleri</title>
<style type="text/css">
#pano {position: absolute;top:161px; left: 100px;background-color:gold; border:10px solid gold; }
img { width: 161px; height: 100px;  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="pano"> 
<img  id="r1" src="http://wowturkey.com/tr84/k_ugursurmeli_Zs36.jpg" alt="Eleysallahü bi kafin abdeh-Kuluna Allah yetmez mi?-Zümer Suresi 36. Ayet">
<img  id="r2" src="http://wowturkey.com/tr86/k_Necmettin_K_Muhammed_Ali8thbeginning_19th.jpg" alt="19. Yüzyıldan Figüratif bir Osmanlı Hat Sanatı Örneği">
<img  id="r3" src="http://wowturkey.com/tr88/k_korgun_pic78.jpg" alt="gemi">
<img  id="r4" src="http://wowturkey.com/tr137/k_Ridvan_DINC_Ridvan_DINC_1.jpg" alt="Yıldız : Bismillahirrahmanirrahim_   Hilal : La ilehe illallah muhammedür rasullah">
</div>

<script type="text/javascript">
//http://www.sitepoint.com/forums/showthread.php?817851-jquery-image-slider&
// http://www.w3schools.com/jquery/jquery_effects.asp

$(document).ready(function(){
$('#r2').hide();
$('#r3').hide();
$('#r4').hide();
});
var A = ['#r1','#r2','#r3','#r4'];
var B = ['#r2','#r3','#r4','#r1'];
    var i = 0;
    (function sonraki() {
      setTimeout(function() {
        if (i==A.length) {i=0}
          $(A[i]).hide(); $(B[i]).show(); i++;
          sonraki();
       
      }, 3000);
    })();


</script>
</body>
</html>

I try this:
$(A[i]).hide(1000); $(B[i]).show(1000); i++;

User Tag List

Thread: [jquery] image slider

Thread Tools

Display

[jquery] image slider

Bookmarks

Bookmarks

Posting Permissions