Question

我的自动旋转木马不起作用。我尝试使用setInterval，如下所示，但它仍然无效。我真的不知道为什么。它在语法上是正确的，我认为它在逻辑上也是错误的。请帮忙。

HTML：

<div class = "slidingPhotos" align="center">
    <div class = "slide active-item">
        <div class = "photo1">
            <img src = "Images/mainImage.jpg"></img>
        </div>
        <div class = "description">
            <h3> Welcome to O-Grocery! Your #1 Online Grocery Store </h3>
        </div>
    </div>
    <div class = "slide ">
        <div class = "container">
            <div class = "photo1">
                <img src = "Images/mainImage3.jpg"></img>
            </div>
            <div class = "description">
                <h3> You have a thousand products to choose from at O-Grocery! </h3>
            </div>
        </div>
    </div>
    <div class = "slide">
        <div class = "container">
            <div class = "photo1">
                <img src = "Images/mainImage2.jpg"></img>
            </div>
            <div class = "description">
                <h3> You can guarantee 100% freshness of goods! </h3>
            </div>
        </div>
    </div>
</div>

<div class ="footer" align="center">
    <div class = "dots">
        <div class = "arrow-prev">
            <a href ="#"><img src = "Images/arrow-prev.png"></img></a>
        </div>
        <ul class="slider-dots">
            <li class="dot active-dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
        </ul>
        <div class = "arrow-next">
            <a href ="#"><img src = "Images/arrow-next.png"></img></a>
        </div>
    </div>
</div>

jQuery的：

setInterval(function()
{
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

var currentDot = $('.active-dot');
var nextDot = currentDot.next();

if (nextSlide.length === 0) {
    nextSlide = $('.slide').first();
    nextDot = $('.dot').first();

currentSlide.fadeOut(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);

currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);

Answer 1

你有语法错误

setInterval(function()
{
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

var currentDot = $('.active-dot');
var nextDot = currentDot.next();

if (nextSlide.length === 0) {
    nextSlide = $('.slide').first();
    nextDot = $('.dot').first();
} // <- THIS is missing in your code

currentSlide.fadeOut(500).removeClass('active-slide');
setTimeout(function(){ nextSlide.addClass('active-slide').fadeIn('slow'); }, 500);

currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
}, 5000);

http://jsfiddle.net/evilbuck/aj0nuyLk/

jQuery自动轮播

1 个答案: