цикл через изображения с помощью JQuery - PullRequest
Новая
       39

цикл через изображения с помощью JQuery

2 голосов
/ 26 февраля 2010

У меня есть пять дел на моей странице (#art #fashion, #self, #nightlife, #community). прямо сейчас, когда вы наводите курсор мыши на них, они загружают содержимое страницы в другой контейнер div (#flyer).

Я бы хотел, чтобы содержимое флаера повторялось каждые 5 секунд или около того.

Таким образом, вместо того, чтобы навести курсор мыши на эти 5 делений, он должен просто автоматически перейти.

это имеет смысл? 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
        $("#art").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#fashion").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#self").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#nightlife").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#community").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
}); 
</script>

Ответы [ 2 ]

3 голосов
/ 27 февраля 2010

Другим способом было бы использовать функцию setInterval следующим образом ... 

$(document).ready(function() { 
    var sourceElements = $("#art,#fashion,#self,#nightlife,#community");
    var pointer = 0;
    setInterval(function() {
        $('#flyer').load($(sourceElements[pointer++]).attr("href") + ' #flyer');
        if (!sourceElements[pointer]) pointer = 0;
    , 5000}); 
});
2 голосов
/ 26 февраля 2010

Мне нравится использовать комбинацию цикла jquery (http://malsup.com/jquery/cycle/) для циклического перемещения контента и ослабления jquery (http://gsgd.co.uk/sandbox/jquery/easing/) для некоторых добавленных эффектов анимации, чтобы выполнить это

...