JQuery слайд-шоу: сделать его лучше - PullRequest
Новая
       29

JQuery слайд-шоу: сделать его лучше

1 голос
/ 08 января 2011

Я пытаюсь утвердить слайд-шоу, которое я использую ниже,

, вот HTML, 

<!--slide-->
<div id="slide">

    <ul class="slide">
        <li><img src="contents/slide-1.jpg" alt="slide 1"/></li>
        <li><img src="contents/slide-2.jpg" alt="slide 2"/></li>
        <li><img src="contents/slide-3.jpg" alt="slide 3"/></li>
    </ul>

</div>
<!--slide-->

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

run_slide('#slide');

, чтобы я мог сделатьнесколько вызовов из одних и тех же функций, 

run_slide('#slide-2');

run_slide('#slide-3');

ниже - функция, первая часть функции работает нормально, но вторая часть не в порядке, когда я хочу передать идентификатор через интервал -setInterval('loop_slide('+target_slide+')',5000);

У меня есть это сообщение об ошибке в моем браузере Firefox, которое я не совсем понимаю,

недопустимый символ [Break On This Error] loop_slide (#slide) 

function run_slide(target_slide) {

    //add a class the the first element
    $('li:first-child',target_slide).addClass('active');

    //Set the opacity of all images to 0
    $('.slide li').css({opacity: 0.0});

    //Get the first image and display it (set it to full opacity)
    $('.slide li:first-child').css({opacity: 1.0});

    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('loop_slide('+target_slide+')',5000);
}

function loop_slide(target_slide) {

    //var target_slide = $('#slide');

    //if no IMGs have the show class, grab the first image
    var current = ($('.slide li.active')?  $('.slide li.active') : $('.slide li:first-child'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('.slide li:first-child') :current.next()) : $('.slide li:first-child')); 

    //Set the fade in effect for the next image, show class has higher z-index
    current.addClass('last-active');
    next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function(){
        current.animate({opacity: 0.0}, 1000).removeClass('active last-active');

        $('.caption p',target_slide).html(caption_description);
    });

}

как это исправить?почему я не могу передать идентификатор во вторую функцию, но я могу в первой функции?

большое спасибо.

1 Ответ

0 голосов
/ 08 января 2011 
setInterval('loop_slide('+target_slide+')',5000);

кажется проблемой, поскольку передаваемая вами переменная анализируется в loop_slide (#slide) вместо loop_slide ('# slide'), следовательно, eval завершается ошибкой.

простое решение: 

setInterval('loop_slide(\''+target_slide+'\')',5000);

кроме того: если вы создаете этот слайдер для целей обучения, было бы неплохо написать его как плагин jquery - см. http://docs.jquery.com/Plugins/Authoring.

...