Предварительное слайд-шоу вручную с помощью jquery - PullRequest
Новая
       13

Предварительное слайд-шоу вручную с помощью jquery

0 голосов
/ 01 октября 2011

пожалуйста, будьте полегче - первый пост!

Хотите изменить следующий скрипт: http://jonraasch.com/blog/a-simple-jquery-slideshow

Люблю, это простота, пытаюсь найти способ добавить продвинутую функцию

Желательно по img или div - по клику или по ссылке.

Есть предложения?

Ценю помощь

edit , ниже скрипт и вот ссылка на рабочую версию:

ссылка на страницу тестирования в реальном времени

сценарий: 

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );

});

стиль: 

#slideshow {
position:relative;
height:350px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

HTML: 

<div id="slideshow">
        <img src="image01.jpg" width="262" height="496" border="0" class="active" />
        <img src="image02.jpg" width="262" height="496" border="0" />
        </div>

Ответы [ 2 ]

0 голосов
/ 01 октября 2011

Мы могли бы сделать это, изменив интервал на тайм-аут, который дает нам идентификатор, который мы можем сбросить по желанию.Затем мы можем использовать щелчок даже, чтобы сбросить этот интервал и перейти вручную, что, в свою очередь, снова запустит интервал.

Используя самый простой пример на jonraasch.com : 

window.slideInterval = null;

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');

    window.slideInterval = setTimeout('slideSwitch()', 5000 )
}

jQuery(function() {
    window.slideInterval = setTimeout('slideSwitch()', 5000 );
});

$(el).click(function(){
    // reset interval
    clearTimeout(window.slideInterval);

    // trigger next slide manually
    slideSwitch();
});

Редактировать

На выходных у меня было время уделить этому больше внимания, и я ознакомился с лучшими практиками создания плагина jQuery.Код немного документирован, но в целом достаточно стандартен и не очень сложен, хотя имеет немало жонглирования переменными:)

Если вы используете что-либо, вам следует использовать это.

http://jsfiddle.net/sg3s/RFJMy/214/

Кстати, вы можете просто удалить функции prev и rand, если не хотите их использовать, запускать, останавливать, инициализировать и передавать, чтобы вся работа.

0 голосов
/ 01 октября 2011

Этот конкретный образец уже имеет встроенную функцию опережения: slideSwitch. Эта функция вызывается в цикле setInterval для продвижения слайд-шоу. Все, что вам нужно сделать, это подключить этот метод к нажатию кнопки, и вы должны быть в порядке.

HTML: 

<div id="advanceShow">Click to Advance</div>

JavaScript 

$(document).ready(function() {
  $('#advanceShow').click(function() {
    slideShow();
  });
});
...