Jquery Otomatik Galeri Slider

Jquery Otomatik Galeri Slider
jQuery Auto Slider
Automatic Image Slider with CSS & jQuery 
Html Kodlarıyla Otomatik resim galerisi yapımı
jQuery Auto Image Slideshow

1.Blogger Kumanda Panelinize gidin
2.Yerleşim tıklayın
3.Gadget/Widget Ekle
4.HTML / JavaScript seçeneğini seçin.
5.Aşağıdaki kodu kopyalayın ve yapıştırın.

<style type="text/css">
    .container1 {
    width: 660px;padding: 0;margin: 0 auto;}
    .folio_block {
    position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
    .main_view {float: left;position: relative;}
    .window {-moz-box-shadow: 0px 0px 5px #303030;
    -webkit-box-shadow: 0px 0px 5px #303030;
    box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
    margin-top:15px;overflow: hidden; position: relative;}
    .image_reel {
    position: absolute;top: 0; left: 0;}
    .image_reel img {float: left;}
    .paging_btrix {
    position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; text-align: center;
    line-height: 40px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq40s_q1lWkdclAMMCx_DpLD_Rt_VxwFG86OhuiNP7vBrEqe5JMQtWYKlhrbAfe3p3aQr4hjxviEZjngnp6Iu1Z_6N_-HdjZZw_NPdIPU9TxbOPjynud2mV-0ZsADaIlmN2pEiqotnZxYe/s320/paging.png) no-repeat;
    display: none;}
    .paging_btrix a {
    padding: 5px;text-decoration: none;color: #fff;}
    .paging_btrix a.active {
    font-weight: bold; background: #920000; border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;}
    .paging_btrix a:hover {font-weight: bold;}
    </style>
    <div class="container1">
    <div class="main_view">
        <div class="window">
            <div class="image_reel">
                <a href="http://i.imgur.com/lZN7Lql.jpg"><img src="http://i.imgur.com/lZN7Lql.jpg" alt="" /></a>
                <a href="http://i.imgur.com/rPXebHN.jpg"><img src="http://i.imgur.com/rPXebHN.jpg" alt="" /></a>
                <a href="http://i.imgur.com/H13Lrjy.jpg"><img src="http://i.imgur.com/H13Lrjy.jpg" alt="" /></a>
                <a href="http://i.imgur.com/MpBPxIB.jpg"><img src="http://i.imgur.com/MpBPxIB.jpg" alt="" /></a>
                <a href="http://i.imgur.com/Y1BVB1I.jpg"><img src="http://i.imgur.com/Y1BVB1I.jpg" alt="" /></a>
                <a href="http://i.imgur.com/YdVO1UW.jpg"><img src="http://i.imgur.com/YdVO1UW.jpg" alt="" /></a>
            </div>
        </div>
        <div class="paging_btrix">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
            <a href="#" rel="4">4</a>
            <a href="#" rel="5">5</a>
            <a href="#" rel="6">6</a>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".paging_btrix").show();
    $(".paging_btrix a:first").addClass("active");
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    $(".image_reel").css({'width' : imageReelWidth});
    rotate = function(){
      var triggerID = $active.attr("rel") - 1;
      var image_reelPosition = triggerID * imageWidth;
      $(".paging_btrix a").removeClass('active');
      $active.addClass('active');
      $(".image_reel").animate({
       left: -image_reelPosition
      }, 500 ); };
     rotateSwitch = function(){ 
      play = setInterval(function(){
       $active = $('.paging_btrix a.active').next();
       if ( $active.length === 0) {
        $active = $('.paging_btrix a:first');}
       rotate();
      }, 5000);};
    rotateSwitch();
    $(".image_reel a").hover(function() {
      clearInterval(play);
    }, function() {
      rotateSwitch();});
    $(".paging_btrix a").click(function() {
      $active = $(this);
      clearInterval(play);
      rotate();
      rotateSwitch();
      return false;});});
    </script>