javascript - 将自动播放添加到现有图像 slider

Question

我正在为我正在构建的网站使用图像 slider ，但它没有自动播放功能。您可以使用 jQuery 为其添加自定义自动播放功能吗？源代码如下。

slider 预览

Aspx 页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="JS/jquery.cycle.all.js"></script>
    <link href="CSS/style.css" rel="stylesheet" />
    <script>
        $(document).ready(function () {
            $('#slider1').cycle({
                fx: 'scrollHorz',
                speed: 'slow',
                timeout: 0,
                next: '#next',
                prev: '#prev',
                pager: '#thumb',
                pagerAnchorBuilder: function (idx, slide) {
                    return '<li><a href="#"><img src="' + slide.src + '" width="60" height="60" /></a></li>';
                }
            });
        });

    </script>

    <section>
        <div class="container">

            <div class="slider">
                <div id="slider1">
                    <img border="0" src="Slider/B50.JPG" width="850" height="637" />
                    <img border="0" src="Slider/B51.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C47.JPG" width="850" height="637" />
                    <img border="0" src="Slider/C43.JPG" width="850" height="637" />
                    <img border="0" src="Slider/E2.JPG" width="850" height="637" />
                    <img border="0" src="Slider/W5.JPG" width="850" height="637" />
                    <img border="0" src="Slider/M21.JPG" width="850" height="637" />
                </div>
                <ul id="thumb"></ul>
                <div id='next' class="slider_next">
                    <img border="0" src="Images/next.png" width="57" height="57" alt="next image" /></div>
                <div id='prev' class="slider_prev">
                    <img border="0" src="Images/prev.png" width="57" height="57" alt="previous image" /></div>
            </div>
        </div>
    </section>

风格

.slider {
    margin: 0 auto;
    width: 850px;
    height: 637px;
    border: 8px solid #FFFFFF;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #333333;
    position: relative;
}

.slider_next {
    width: 62px;
    height: 62px;
    background: #f8f8f8;
    border-radius: 70px;
    position: absolute;
    z-index: 99;
    top: 287px;
    left: 820px;
    padding: 5px 0 0 5px;
    cursor: pointer;
}

.slider_prev {
    width: 62px;
    height: 62px;
    background: #f8f8f8;
    border-radius: 70px;
    position: absolute;
    z-index: 99;
    top: 287px;
    left: -35px;
    padding: 5px 0 0 5px;
    cursor: pointer;
}

#thumb {
    width: 100%;
    height: 80px;
    margin: 20px 14%;
}

    #thumb li {
        width: 60px;
        float: left;
        margin: 12px;
        list-style: none;
    }

    #thumb a {
        width: 60px;
        padding: 3px;
        display: block;
        border: 3px solid #FFFFFF;
        border-radius: 3px;
        box-shadow: 1px 1px 3px #333333;
    }

    #thumb li.activeSlide a {
        border: 3px solid #0a526f;
        border-radius: 3px;
        box-shadow: 1px 1px 3px #333333;
    }

    #thumb a:focus {
        outline: none;
    }

    #thumb img {
        border: none;
        display: block;
    }

Answer 1

尝试添加这个。这将每 2 秒更换一次幻灯片

function changeSlide(){
    $('#next').trigger('click');
    setTimeout(changeSlide,2000);
}

setTimeout(changeSlide,2000);

所以最终的代码看起来像

$(document).ready(function () {
    $('#slider1').cycle({
        fx: 'scrollHorz',
        speed: 'slow',
        timeout: 0,
        next: '#next',
        prev: '#prev',
        pager: '#thumb',
        pagerAnchorBuilder: function (idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="60" height="60" /></a></li>';
        }
    });

    function changeSlide(){
        $('#next').trigger('click');
        setTimeout(changeSlide,2000);
    }

    setTimeout(changeSlide,2000);

});