Gönderen Konu: [TUT] jQuery ile basit bir Silder oluşturun  (Okunma sayısı 909 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
[TUT] jQuery ile basit bir Silder oluşturun
« : 19 Oca 2013, 10:39:25 »
[h1]

Portalinizda bir tane html Blok olusturun

ekleyin

Kod: [Seç]
<script type="text/javascript">
$(document).ready(function() {
 
 
     
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth();
    var left_value = item_width * (-1);
         
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
     
    //set the default item to the correct position
    $('#slides ul').css({'left' : left_value});
 
    //if user clicked on prev button
    $('#prev').click(function() {
 
        //get the right position           
        var left_indent = parseInt($('#slides ul').css('left'))   item_width;
 
        //slide the item           
        $('#slides ul').animate({'left' : left_indent}, 200,function(){   
 
            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           
 
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
 
        //cancel the link behavior           
        return false;
             
    });
 
 
    //if user clicked on next button
    $('#next').click(function() {
         
        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;
         
        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 200, function () {
             
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                 
             
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
         
        });
                 
        //cancel the link behavior
        return false;
         
    });       
     
    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('#slides').hover(
         
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('rotate()', speed);   
        }
    );
         
});
 
//a simple function to click next link
//a timer will call this function, and the rotation will begin :) 
function rotate() {
    $('#next').click();
}
</script>


<style type="text/css">
#carousel {
    width:255px;
    height:290px;   
    margin:0 auto;
}
 
#slides {
    overflow:hidden;
    /* fix ie overflow issue */
    position:relative;
    width:250px;
    height:250px;
    border:1px solid #ccc;
}
 
/* remove the list styles, width : item width * total items */
#slides ul {
    position:relative;
    left:0;
    top:0;
    list-style:none;
    margin:0;
    padding:0; 
    width:750px;           
}
 
/* width of the item, in this case I put 250x250x gif */
#slides li {
    width:250px;
    height:250px;   
    float:left;
}
 
#slides li img {
    padding:5px;
}
 
/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0; 
    float:right;
}
 
#buttons a {
    display:block;
    width:31px;
    height:32px;
    text-indent:-999em;
    float:left;
    outline:0;
}
 
a#prev {
    background:url(images/arrow.gif) 0 -31px no-repeat;
}
 
a#prev:hover {
    background:url(images/arrow.gif) 0 0 no-repeat;
}
 
a#next {
    background:url(images/arrow.gif) -32px -31px no-repeat;
}
 
a#next:hover {
    background:url(images/arrow.gif) -32px 0 no-repeat;
}
 
.clear {clear:both}
</style>


<div id="carousel">
    <div id="buttons">
        <a href="#" id="prev">prev</a>
        <a href="#" id="next">next</a>
        <div class="clear"></div>
    </div>
     
    <div class="clear"></div>
 
    <div id="slides">
        <ul>
            <li><img src="slide1.png" width="240" height="240" alt="Slide 1"/></li>
            <li><img src="slide2.png" width="240" height="240" alt="Slide 2"/></li>
            <li><img src="slide3.png" width="240" height="240" alt="Slide 3"/></li>
        </ul>
        <div class="clear"></div>
    </div>
 
</div>

kendiliginden degismesini istiyorsaniz

bulun
Kod: [Seç]
//grab the width and calculate left value
oncesine ekleyin

Kod: [Seç]
//rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);

[/h1]
« Son Düzenleme: 13 Mar 2013, 11:54:57 Gönderen: orhan »

Çevrimdışı ReprimonD

  • Trade Sayısı: (0)
  • Yeni Üye
  • *
  • İleti: 21
  • Karma +0/-0
    • Profili Görüntüle
Ynt: [TUT] jQuery ile basit bir Silder oluşturun
« Yanıtla #1 : 06 Haz 2016, 08:08:35 »
Bir demosu varmı acaba