need a jquery slideshow like this

**hno2005** · 02-16-2012 01:41 AM

HI every one
I'm looking for a slideshow like this web site :
quibids.com

I've searched alot but I couldn't find it ,

any suggest ?

Thanks so much

**Ayşe** · 02-16-2012 06:37 PM

I am new to Jquery. I use z-index
I wrote this code:

Code:

 
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
/*
http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-image_crossbrow
http://www.w3schools.com/css/css_list.asp
http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style


/*
http://www.css3.info/preview/rounded-border/
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-radius
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-radius
*/
#pano{width:550px; height:300px; border:2px solid blue;
border:2px solid;
/*border-radius:25px;*/
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}
/*
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
*/

#mydiv {
float:left;z-index:0;
}
#liste { position:absolute;
left:380px;width:180px; height:300px; border:1px solid blue;
float:left;
z-index:1;}

li{width:180px;height:46px; border:1px solid green;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
/*text-align:center;*/
}

.ok { float:left;width:40px;height:40px; 
border:2px solid transparent;
border-bottom-left-radius: 50px;
border-top-left-radius: 60px;
/* http://www.w3schools.com/cssref/pr_border-left_color.asp*/
}
.ilk { 
background-color:green;
}

#imgid {
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
};

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script tpe="text/javascript">
// http://www.w3schools.com/jquery/jquery_events.asp

$(document).ready(function () {

$('li').mouseover(
function () {
$(this).find('div:first').addClass('ilk');
$('#imgid').attr('src',$(this).find('img').attr('src') );
});

$('li').mouseout(
function () {
$(this).find('div:first').removeClass('ilk');
$('#imgid').attr('src',$(this).find('img').attr('src') );
});
});

</script>
</head>
<body>
<div id="pano">
<div id="mydiv"><img id="imgid" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="398" height="300"></div>
<div id="liste">
<ul>
<li><div class="ok"></div><img src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="40" height="40"><a> gemi</a></li>
<li><div class="ok"></div><img src="http://img214.imageshack.us/img214/3698/adsz37nm6jx.png" alt="anahtar" width="40" height="40"><a> anahtar</a></li>
<li><div class="ok"></div><img src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="besmele" width="40" height="40"><a> besmele</a></li>
<li><div class="ok"></div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG" alt="meyve" width="40" height="40"><a> meyve</a></li>
<li><div class="ok"></div><img src="http://s.azbuz.com/uploads/p/66/8/969/668969/5505016.jpg" alt="bu da ge&#231;er y&#226; h&#251;" width="40" height="40"><a> bu da ge&#231;er</a></li>
<li><div class="ok"></div><img src="http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg" alt="kuş" width="40" height="40"><a> kuş</a></li>
</ul>
</div>
</div>
</body>
</html>

The above code is working in firefox 4.0b9

**Abitha** · 02-16-2012 11:17 PM

You can find many JQuery Slideshows here like JQuery Image slider with pagination, JQuery Featured Content Slider. Am sure you can find one among these would be useful to you.

**Ayşe** · 02-17-2012 03:02 PM

using setTimeout

Code:

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul {
list-style-type:none;
padding:0px;
margin:0px;
}

#pano { width:550px; height:300px; border:2px solid blue;
border:2px solid;
/*border-radius:25px;*/
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
}

#mydiv {
float:left;z-index:0;
}
#liste { position:absolute;
left:380px;width:180px; height:300px; 
background-color:transparent;
float:left;
z-index:1;
}

li{width:180px;height:46px; 
background-color:transparent;
}

.ilkdiv { float:left;width:40px;height:30px; 
border:1px solid transparent;
background-color:transparent;
border-bottom-left-radius: 18px;
border-top-left-radius: 18px;
/* http://www.w3schools.com/cssref/pr_border-left_color.asp*/
}
.yaprak {
-webkit-border-radius: 25px 0px 25px 0px;-moz-border-radius: 25px 0px 25px 0px;border-radius: 25px 0px 25px 0px;border:1px solid #87A386;background-color:#BFE3A3;
-webkit-box-shadow: #A4B37C 7px 7px 7px;-moz-box-shadow: #A4B37C 7px 7px 7px; box-shadow: #A4B37C 7px 7px 7px;
/*  http://cssround.com/ */
}

#myimg {
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
};

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

<script tpe="text/javascript">
// http://www.webdeveloper.com/forum/showthread.php?t=256833
// http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius&preval=10&#37;25

$(document).ready(function () {

var d= $('.ilkdiv');
    var i = 0;
    (function sonraki() {
      setTimeout(function() {
        if (i==d.length) {i=0}

$('#myimg').attr('src',$('#img'+i).attr('src') );

$('#div'+i).addClass('yaprak');
// http://www.w3schools.com/jquery/jquery_ref_selectors.asp
// $("[href!='default.htm']")
$('div[id!="div'+i+'"]').removeClass('yaprak');
  i++;
  sonraki();   
 }, 3000);
    })();

/*
$('li').mouseover(function () {
var LI=$(this);
var IND =LI.index();
$('#div'+IND).addClass('yaprak');
$('#imgid').attr('src',$('#img'+IND).attr('src') );
});

$('li').mouseout(function () {
$('#div'+$(this).index()).removeClass('yaprak');
});
*/
});

</script>
</head>
<body>
<div id="pano">
<div id="mydiv"><img id="myimg" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="398" height="300"></div>
<div id="liste">
<ul>
<li><div id="div0" class="ilkdiv"></div><img id="img0" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="40" height="40"><a> gemi</a></li>
<li><div id="div1" class="ilkdiv"></div><img id="img1" src="http://img214.imageshack.us/img214/3698/adsz37nm6jx.png" alt="anahtar" width="40" height="40"><a> anahtar</a></li>
<li><div id="div2" class="ilkdiv"></div><img id="img2" src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="besmele" width="40" height="40"><a> besmele</a></li>
<li><div id="div3" class="ilkdiv"></div><img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG" alt="meyve" width="40" height="40"><a> meyve</a></li>
<li><div id="div4" class="ilkdiv"></div><img id="img4" src="http://s.azbuz.com/uploads/p/66/8/969/668969/5505016.jpg" alt="bu da ge&#231;er y&#226; h&#251;" width="40" height="40"><a> bu da ge&#231;er</a></li>
<li><div id="div5" class="ilkdiv"></div><img id="img5" src="http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg" alt="kuş" width="40" height="40"><a> kuş</a></li>
</ul>
</div>
</div>
</body>
</html>

**Ayşe** · 02-18-2012 04:59 PM

The code is working in Firefox 4.0b9 and Konqueror 4.55

Code:

  
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#pano{width:550px; height:300px; background-color: #68E3C2;border:2px solid blue; border:2px solid;border-bottom-left-radius: 25px;border-top-left-radius: 25px; }
#mydiv { float:left;z-index:0; }
#liste { position:absolute; left:380px;width:180px; height:300px; float:left; background-color: transparent; z-index:1;}
ul { list-style-type:none; padding:0px; margin:0px; }
li{width:180px;height:46px; background-color: transparent; border-bottom-left-radius: 25px; border-top-left-radius: 25px; }
.ilk { float:left;width:40px;height:36px; border:2px solid transparent; border-bottom-left-radius: 50px; border-top-left-radius: 60px; }
#imgid { border-bottom-left-radius: 20px; border-top-left-radius: 20px; };
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

</head>
<body>
<div id="pano">
<div id="mydiv"><img id="imgid" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="398" height="300"></div>
<div id="liste">
<ul>
<li><div id="div0" class="ilk"></div><img id="img0" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="40" height="40"><a> gemi</a></li>
<li><div id="div1" class="ilk"></div><img id="img1" src="http://img214.imageshack.us/img214/3698/adsz37nm6jx.png" alt="anahtar" width="40" height="40"><a> anahtar</a></li>
<li><div id="div2" class="ilk"></div><img id="img2" src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="besmele" width="40" height="40"><a> besmele</a></li>
<li><div id="div3" class="ilk"></div><img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG" alt="meyve" width="40" height="40"><a> meyve</a></li>
<li><div id="div4" class="ilk"></div><img id="img4" src="http://www.husnuhat-iipek.com/img/b/urun/18102011_RJ8R12TE.jpg" alt="kayık" width="40" height="40"><a> kayık</a></li>
<li><div id="div5" class="ilk"></div><img id="img5" src="http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg" alt="kuş" width="40" height="40"><a> kuş</a></li>
</ul>
</div>
</div>

<script tpe="text/javascript">
// http://www.w3schools.com/jquery/jquery_events.asp
// http://www.w3schools.com/jsref/met_win_cleartimeout.asp
var A = [
'http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg',
'http://img214.imageshack.us/img214/3698/adsz37nm6jx.png',
'http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg',
'http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG',
'http://www.husnuhat-iipek.com/img/b/urun/18102011_RJ8R12TE.jpg',
'http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg'
];

$('li').mouseover(function () {
var ind= $(this).index(); 
$('#div'+ind).css('background-color','#68E3C2');
$('.ilk[id!="div'+ind+'"]').css('background-color','transparent');
$('#imgid').attr('src',A[$(this).index()] );
});

$('li').mouseout(function () {
var sira= $(this).index();
$('#div'+sira).css('background-color','transparent');
});


var c=0;
var t;
var d= $('.ilk');
function sonraki(){ 
$('#div'+c).css('background-color','#68E3C2');
$('.ilk[id!="div'+c+'"]').css('background-color','transparent');
$('#imgid').attr('src',A[c] );
c=c+1;
if(c==d.length) {c=0; }
t=setTimeout("sonraki()",5000);
}

function durdur() { clearTimeout(t); }

$('#pano').hover(function () { durdur(); }, function () { sonraki();  });

$(document).ready(function () { sonraki()}); 

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

**Ayşe** · 02-19-2012 03:38 AM

I wrote
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */

to rotate a div element
http://www.w3schools.com/cssref/css3_pr_transform.asp

Code:

  
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#pano{position:absolute:left:0;width:550px; height:300px; background-color: #68E3C2;border:2px solid blue; border:2px solid;border-bottom-left-radius: 25px;border-top-left-radius: 25px; }
#mydiv { float:left;z-index:0; }
#liste { position:absolute; left:380px;width:180px; height:300px; float:left; background-color: transparent; z-index:1;padding:10px;}
ul { list-style-type:none; padding:0px; margin:0px; }
li{width:180px;height:46px; background-color: transparent; border-bottom-left-radius: 25px; border-top-left-radius: 25px; }
.ilk { float:left;width:40px;height:36px; border:2px solid transparent; 
border-top-right-radius: 60px; 
/*  http://davidwalsh.name/css-transform-rotate 
http://www.w3schools.com/cssref/css3_pr_transform.asp
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
*/
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
#imgid { border-bottom-left-radius: 20px; border-top-left-radius: 20px; };
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

</head>
<body>
<div id="pano">
<div id="mydiv"><img id="imgid" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="398" height="300"></div>
<div id="liste">
<ul>
<li><div id="div0" class="ilk"></div><img id="img0" src="http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg" alt="gemi" width="40" height="40"><a> gemi</a></li>
<li><div id="div1" class="ilk"></div><img id="img1" src="http://img214.imageshack.us/img214/3698/adsz37nm6jx.png" alt="anahtar" width="40" height="40"><a> anahtar</a></li>
<li><div id="div2" class="ilk"></div><img id="img2" src="http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg" alt="besmele" width="40" height="40"><a> besmele</a></li>
<li><div id="div3" class="ilk"></div><img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG" alt="meyve" width="40" height="40"><a> meyve</a></li>
<li><div id="div4" class="ilk"></div><img id="img4" src="http://www.husnuhat-iipek.com/img/b/urun/18102011_RJ8R12TE.jpg" alt="kayık" width="40" height="40"><a> kayık</a></li>
<li><div id="div5" class="ilk"></div><img id="img5" src="http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg" alt="kuş" width="40" height="40"><a> kuş</a></li>
</ul>
</div>
</div>

<script tpe="text/javascript">
// http://www.w3schools.com/jquery/jquery_events.asp
// http://www.w3schools.com/jsref/met_win_cleartimeout.asp
var A = [
'http://img.blogcu.com/uploads/Muhsana_besmele79rb.jpg',
'http://img214.imageshack.us/img214/3698/adsz37nm6jx.png',
'http://www.kalemguzeli.org/images/upload/DavutBektas_012.jpg',
'http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Bismillah.JPG/250px-Bismillah.JPG',
'http://www.husnuhat-iipek.com/img/b/urun/18102011_RJ8R12TE.jpg',
'http://www.dunyabulteni.net/resim/250x190/2011/06/10/kus-besmele-425x600.jpg'
];

$('li').mouseover(function () {
var ind= $(this).index(); 
$('#div'+ind).css('background-color','#68E3C2');
$('.ilk[id!="div'+ind+'"]').css('background-color','transparent');
$('#imgid').attr('src',A[$(this).index()] );
});

$('li').mouseout(function () {
var sira= $(this).index();
$('#div'+sira).css('background-color','transparent');
});


var c=0;
var t;
var d= $('.ilk');
function sonraki(){ 
$('#div'+c).css('background-color','#68E3C2');
$('.ilk[id!="div'+c+'"]').css('background-color','transparent');
$('#imgid').attr('src',A[c] );
c=c+1;
if(c==d.length) {c=0; }
t=setTimeout("sonraki()",5000);
}

function durdur() { clearTimeout(t); }

$('#pano').hover(function () { durdur(); }, function () { sonraki();  });

$(document).ready(function () { sonraki()}); 

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

You can write the code you wanted without using Jquery.

**Ayşe** · 02-21-2012 10:32 AM

Code:

 
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#pano{position:absolute:left:0;width:560px; height:300px; background-color: #68E3C2;border:2px solid blue; border:2px solid;border-bottom-left-radius: 25px;border-top-left-radius: 25px; }
#mydiv { float:left;z-index:0; }
#liste { position:absolute; left:380px;width:180px; height:300px; float:left; background-color: transparent; z-index:1;padding:10px;}
ul { list-style-type:none; padding:0px; margin:0px; }
li{width:180px;height:46px; background-color: transparent; border-bottom-left-radius: 25px; border-top-left-radius: 25px; }
.ilk { float:left;width:40px;height:36px; border:2px solid transparent; 
border-top-right-radius: 60px; 
/*
http://www.w3schools.com/cssref/css3_pr_transform.asp
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
*/
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
#imgid { border-bottom-left-radius: 20px; border-top-left-radius: 20px; };
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

</head>
<body>
<div id="pano">
<div id="mydiv"><img id="imgid" src="http://img03.blogcu.com/images/t/a/t/tatilyerleriturkiye/d0dadd4e67b04aa894d926672840c7f2_1271074132.jpg" alt="" width="398" height="300"></div>
<div id="liste">
<ul>
<li><div id="div0" class="ilk"></div><img src="http://img03.blogcu.com/images/t/a/t/tatilyerleriturkiye/d0dadd4e67b04aa894d926672840c7f2_1271074132.jpg" alt="ortak&#246;y" width="40" height="40"><a> ortak&#246;y</a></li>
<li><div id="div1" class="ilk"></div><img src="http://resim.samanyoluhaber.com/resim/git_gor_21.jpg" alt="kapadokya" width="40" height="40"><a> kapadokya</a></li>
<li><div id="div2" class="ilk"></div><img src="http://resim.samanyoluhaber.com/resim/git_gor_24.jpg" alt="pamukkale" width="40" height="40"><a> pamukkale</a></li>
<li><div id="div3" class="ilk"></div><img src="http://resim.samanyoluhaber.com/resim/git_gor_18.jpg" alt="adalar" width="40" height="40"><a> adalar</a></li>
<li><div id="div4" class="ilk"></div><img src="http://resim.samanyoluhaber.com/resim/git_gor_13.jpg" alt="k&#246;yceğiz" width="40" height="40"><a> k&#246;yceğiz</a></li>
<li><div id="div5" class="ilk"></div><img src="http://resim.samanyoluhaber.com/resim/git_gor_7.jpg" alt="istanbul'dan" width="40" height="40"><a> İstanbul'dan</a></li>
</ul>
</div>
</div>
<script tpe="text/javascript">
// http://www.w3schools.com/jquery/jquery_events.asp
// http://www.w3schools.com/jsref/met_win_cleartimeout.asp

var A = [
'http://img03.blogcu.com/images/t/a/t/tatilyerleriturkiye/d0dadd4e67b04aa894d926672840c7f2_1271074132.jpg',
'http://resim.samanyoluhaber.com/resim/git_gor_21.jpg',
'http://resim.samanyoluhaber.com/resim/git_gor_24.jpg',
'http://resim.samanyoluhaber.com/resim/git_gor_18.jpg',
'http://resim.samanyoluhaber.com/resim/git_gor_13.jpg',
'http://resim.samanyoluhaber.com/resim/git_gor_7.jpg'
];

var c = 0;
var t;

function changeImage(ind) {
$('#div'+ind).css('background-color','#68E3C2');
$('.ilk[id!="div'+ind+'"]').css('background-color','transparent');
$('#imgid').attr('src',A[ind] );
}

function sonraki(){  
changeImage (c); 
c=(c+1)&#37; A.length;
t=setTimeout('sonraki()',5000);
}


$('li').mouseover(function () { changeImage( $(this).index() );  c = $(this).index();  } );

$('#pano').hover(function () {  clearTimeout(t); }, function () {   sonraki(); });

$(document).ready(function () { sonraki()}); 

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

**Ayşe** · 02-23-2012 01:24 PM

......

**DanInMA** · 02-23-2012 01:29 PM

OP doesnt appear to be responding, your probably wasting your time

Thread: need a jquery slideshow like this

Thread Tools

Display

need a jquery slideshow like this

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions