将分页点和文本标题添加到小 jQuery 轮播

Question

我想增强已实现的滑块，如下所示；现在有简单的虚线分页和小型显示标题文本区域。（出现在每张图片幻灯片下方的说明文字）

JSFIDDLE / DEMO 已更新 Fiddle!

我想实现的dotted-pagination图片示例和字幕效果：

jQuery:

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();
    }
    // 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');
        } else {
            // Rotate elements
            jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
        }
    }
    // Set Interval
    var carouselScroll = setInterval(carouselSlide,carouselInterval);
    // Pause on hover
    jQuery('.carousel').hover(function() {
        clearInterval(carouselScroll);
    }, function() {
        carouselScroll = setInterval(carouselSlide,carouselInterval);
        carouselSlide();
    });
});

Mark-Up:

    <section id="slideShowHold" class="floatLeft"><!-- slider wrap -->

    <div class="carousel">
        <ul class="carouselNav">
            <li>
                <a href="#"><img src="images/states/state1.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="images/states/state2.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="images/states/state3.jpg" /></a>
            </li>
        </ul>
    </div>

    </section><!--slideShowHold-->

Answer 1

HTML :

<div class="carousel">
    <ul class="carouselNav">
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513-Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
        <li>
            <a href="#"><img src="http://st.depositphotos.com/2274151/3518/i/950/depositphotos_35186513Sample-grunge-blue-round-stamp.jpg" /></a>
        </li>
    </ul>


</div>
   <div class="carouselPagination">
       <ul >
        <li>
            O
        </li>
        <li>
            O
        </li>
        <li>
            O
        </li>
    </ul>


   </div>
</section><!--slideShowHold-->

JS :

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();
    });
});

CSS :

img { max-width: 300px; }

.carousel img { 
    border: 2px solid #0b0b0b;
}
.carousel {
    text-align: center;
}
.carousel ul {
    list-style: none;
}
.carousel li {
    display: none;
}

li.active{color:red;}

您可以使用 li.active 制作您想要的东西，并将 'O' 更改为图像或您想要的东西，尽情享受吧。

将分页点和文本标题添加到小 jQuery 轮播

add paginated dots and text captions to small jQuery carousel

javascript

css

jquery

slider

carousel