2013-09-22 3 views
-1

Я разработал простой баннер jquery для одного веб-сайта. Баннер работает нормально, но как автоматически обновлять баннер с заданным интервалом. Я прошел через различные коды, но он не работает. Пожалуйста, помогите мне, исправив повторение кода баннера за определенные промежутки времени.jquery banner with setinterval

CSS-КОД:

.banner {-webkit-border-radius:6px; -moz-border-radius:8px;  
       border-radius:8px; -khtml-border-radius: 8px; 
       border:#bbd9ef solid 1px; background:#f5fffa; 
       padding: 5px 0 0 20px; width: 200px; height: 110px; 
      } 
    .k, .l, .m, .n {position: relative; top: -200px; text-decoration: none; } 
    .n { font-weight: bold; color: red; } 

СЦЕНАРИЙ КОД с jquery1.9.1:

$(document).ready(function() { 
    $(".banner a").hide(); 
    (function() { 
     $(".k").show().animate({ 
      top: "0" 
     }, 3000, function() { 
      $(".l").show().animate({ 
       top: "0" 
      }, 3000, function() { 
       $(".m").show().animate({ 
        top: "0" 
       }, 3000, function() { 
        $(".n").show().animate({ 
         top: "0" 
        }, 3000); 
       }); 
      }); 
     }); 
    })(); 
}); 

HTML-КОД:

<div class="banner"> 
    <a href="#" class="k">Design banner in your ownway</a><br /> 
    <a href="#" class="l"> Get more taffic and publishers.</a><br/> 
    <a href="#" class="m">Still doubt, please do contact:</a><br/><br/> 
    <a href="#" class="n">www.freemenu.info</a> 
</div> 
+0

что вы имеете в виду обновления? –

+0

снова код, обрабатываемый с помощью setinterval – GURU

+0

как в http://jsfiddle.net/arunpjohny/sQ5bX/1/ –

ответ

0

После того, как элемент n показан установить таймер для перезапуска анимации

$(document).ready(function() { 
    $(".banner a").hide(); 
    function banner(){ 
     $(".k").show().animate({ 
      top: "0" 
     }, 3000, function() { 
      $(".l").show().animate({ 
       top: "0" 
      }, 3000, function() { 
       $(".m").show().animate({ 
        top: "0" 
       }, 3000, function() { 
        $(".n").show().animate({ 
         top: "0" 
        }, 3000, function(){ 
         setTimeout(function(){ 
          $(".banner a").hide().css('top', ''); 
          banner(); 
         }, 5000); 
        }); 
       }); 
      }); 
     }); 
    } 
    banner(); 
}); 

Демо: Fiddle

+0

Спасибо, г-н Арун за предложение правильного кода – GURU

Смежные вопросы