WordTasarım Kayar Resimli Duyuru Alanı

[WordTasarim]

Önizleme

Kod: Tümünü Seç Tümünü Kopyala

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>     <script type="text/javascript">
    $(window).load(function(){
        
        var toplamLi = $("#s li").length;
        var liGenislik = $("#s li").width();
        var toplamGenislik = toplamLi*liGenislik;
            toplamGenislik = toplamGenislik + "px";
        $("#s").css("width",toplamGenislik);
        $("#slider").prepend('<div id="onceki">Önceki</div><div id="sonraki">Sonraki</div>');
        
        var wordtasarim = 0;
        
        var GeriGit = toplamLi*liGenislik-liGenislik+"px";
        $("#sonraki").click(function(){
            if (wordtasarim == toplamLi-1){
                $("#s").animate({"marginLeft":"+="+GeriGit});
                wordtasarim = 0;
            }else {
                wordtasarim++;
                $("#s").animate({"marginLeft":"-="+liGenislik}, "slow");
            }
        });
        
        $("#onceki").click(function(){
            if (wordtasarim == 0){
                $("#s").animate({"marginLeft":"-="+GeriGit});
                wordtasarim = toplamLi-1;
            }else {
                wordtasarim--;
                $("#s").animate({"marginLeft":"+="+liGenislik}, "slow");
            }    
        });
        
    });
    </script>     <style type="text/css">     body {background-color: #f1f1f1}      ul,li {padding: 0; margin: 0; border: 0; list-style: none}       #slider {padding: 10px; border: 3px solid #ddd; width: 655px; position: relative; margin: 50px auto}       .slider {width: 629px; height: 155px; overflow: hidden; margin: 0 auto}       #s li {float: left}       #sonraki {background: url("http://img.webme.com/pic/w/wordtasarim/sagok.png"); width: 40px; height: 40px; cursor: pointer; text-indent: -9999px; position: absolute; top: 60px; right: -20px}       #onceki {background: url("http://img.webme.com/pic/w/wordtasarim/solok.png"); width: 40px; height: 40px; cursor: pointer; text-indent: -9999px; position: absolute; top: 60px; left: -20px}       </style>    <div id="slider"><div class="slider"> <ul id="s"> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" alt="" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" alt="" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" alt="" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" alt="" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-1.png" alt="" /></a></li> <li><a href="#" _fcksavedurl="#"><img src="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" _fcksavedurl="http://img.webme.com/pic/w/wordtasarim/kayarmenu-resim-2.png" alt="" /></a></li> </ul> </div></div>

Kaynak : WordTasarım

[admin]

Slide Menü demek istemişsin gayet güzel ellerine sağlık

[WordTasarim]

:d

[GrafikDizayn]

Teşekkürler.. /* İlk mesaja resim ve kaynak bölümü eklenmiştir.. */

[WordTasarim]

Rica ederim

[coder-web]

Guzel ellerinize saglik.