Question

我可以在下面找到我对jQuery Carousel脚本的更改/尝试;但令我沮丧的是，活动课程没有正确附加，而是始终将第一个<li>显示为活动状态。我也希望有能力点击＆＃39;每个<li>代表分页，以便它可以转到该幻灯片。它是一个非常小的3图像旋转木马。请带一个gandar，用我的 jFiddle大饱眼福。如果有任何有效的建议，请出示。

jQuery(document).ready(function(){
    /**
     * Check if first li element is hidden
     * then show
     */
    if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
        // Toggle visibility
        jQuery('.carouselNav li:first-child').toggle();
         jQuery('.carouselPagination li:first-child').addClass('active');
    }
    // Interval time
    var carouselInterval = 5000;
    // Slider
    function carouselSlide(){
        // Check if last element was reached
        if( jQuery('.carouselNav li:visible').next().length == 0 ) {
            // Hide last li element
            jQuery('.carouselNav li:last-child').slideUp('fast');
            // Show the first one
            jQuery('.carouselNav li:first-child').slideDown('fast');

            jQuery('.carouselPagination li:last-child').removeClass('active');
            jQuery('.carouselPagination li:first-child').addClass('active');
        } else {
            // Rotate elements
            jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
            jQuery('.carouselPagination active').removeClass('active').next('li').addClass('active');
        }
    }
    // Set Interval
    var carouselScroll = setInterval(carouselSlide,carouselInterval);
    // Pause on hover
    jQuery('.carousel').hover(function() {
        clearInterval(carouselScroll);
    }, function() {
        carouselScroll = setInterval(carouselSlide,carouselInterval);
        carouselSlide();
    });
});

Answer 1

代码中的一些小修复：

首先，您正在寻找带有＆＃34;活跃＆＃34;的列表项目class，所以要确保第一个列表项具有＆＃34; active＆＃34;类。

<li class="active">

其次＆＃34; jQuery（＆＃39; .carouselPagination active＆＃39;）＆＃34;在活动之前缺少点以按类名选择。

jQuery('.carouselPagination li.active').removeClass('active').next('li').addClass('active');

这里是具有修复和点击功能的代码。代码很乱，但它应该让你知道如何开始。 https://jsfiddle.net/x89wxoqu/

检测活动<li>的jQuery轮播（分页）</li>

1 个答案: