Добавить автовоспроизведение в jQuery slideshow

Question

В настоящее время у меня есть четыре страницы, которые являются полноразмерными целевыми страницами. Я хотел бы добавить funcionality, который позволит автоиграть. Это изменит функциональность, которая будет больше похожа на слайд-шоу и менее похожа на статические целевые страницы.

В моей текущей навигации для моих целевых страниц есть «текущий селектор навигационных элементов»; Вот мой код для моей текущей навигации, который я хотел бы добавить функцию JQuery автовоспроизведением к:

$(document).ready(function() { 
    /** nav selector **/ 
    var bodyid = $('body').attr('id'); 
    $('nav a.'+ bodyid).addClass('active'); 
    $("body").css("display", "none"); 

    $("body").fadeIn(500); 

    $("a").click(function(event){ 
     event.preventDefault(); 
     linkLocation = this.href; 
     $("body").fadeOut(500, redirectPage);  
    }); 

    function redirectPage() { 
     window.location = linkLocation; 
    } 
}); 

Вот мой HTML для Nav:

Вот мой CSS: nav { позиция: абсолютная; верх: 4%; левый: 10,45%;
} nav a { float: слева; дисплей: встроенный блок; ширина: 15px; высота: 15px; margin: 0 7px; фон: #fff; непрозрачность: .85; border-radius: 999px; курсор: указатель; переход: все 150 мс; } nav a: hover, nav a.active { непрозрачность: 1; фон: # 007cc0; }

Answer 1

Для начала вы можете использовать iframe для переноса целевых страниц, чтобы некоторые элементы управления транспортом или навигация могли оставаться постоянными для пользователя. Ваше нынешнее устройство звучит, как будто это может сбивать с толку, но я не знаю цели, поэтому ...

Я бы предположил, что вы статически определяете следующую страницу в HTML каждой целевой страницы, а затем используйте setTimeout() для перейдите к этому местоположению через некоторое время.

Более сложная реализация включает способ остановить автовоспроизведение.

var nextPage = "http://your_domain.com/landing_page_2.html"; // set in each page. 
var autoPlayEnabled = true; // toggle this with a play/pause button of some kind. 

function navToNext() 
{ 
    if(autoPlayEnabled) 
    { 
     $("body").fadeOut(500, function(){ window.location = nextPage; });   
    } 
} 

setTimeout(navToNext, 5000); // five seconds