www.webdeveloper.com
Results 1 to 9 of 9

Thread: need a jquery slideshow like this

  1. #1
    Join Date
    Apr 2009
    Posts
    14

    need a jquery slideshow like this

    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

  2. #2
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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
    Last edited by Ayşe; 02-16-2012 at 07:04 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  3. #3
    Join Date
    Apr 2011
    Posts
    4
    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.

  4. #4
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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>
    Last edited by Ayşe; 02-17-2012 at 03:06 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  5. #5
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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>
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  6. #6
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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.
    Last edited by Ayşe; 02-19-2012 at 04:13 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  7. #7
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    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>
    Last edited by Ayşe; 02-21-2012 at 10:37 AM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  8. #8
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    ......
    Last edited by Ayşe; 02-23-2012 at 01:35 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

  9. #9
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    OP doesnt appear to be responding, your probably wasting your time

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles