Question

我一直在使用javascript / jquery处理我的第一个滑块，滑块本身正在工作，除非我在我的最后一个图像上，如果我点击下一个它进入空白区域并停止。如果我只是让它变得有趣它会自行循环并回到第一张幻灯片。我试过制作一个JSFiddle，但由于某种原因，我无法让它完全在小提琴中工作，所以他们可能在启动过程中出错了，我不确定。如果我在最后一张幻灯片上单击下一个按钮，它在我的本地站点上运行正常，而不是不再工作的问题。

HTML5

<body>

    <div class="wrapper">
        <div id="slider">
            <img id="1" src="Images/slide_image1.jpg" alt="HDTV">
            <img id="2" src="Images/slide_image2.jpg" alt="Furniture">
            <img id="3" src="Images/slide_image3.jpg" alt="Electronics">
        </div>

        <a href="#" class="left" onclick="prev(); return false;">Previous</a>
        <a href="#" class="right" onclick="next(); return false;">Next</a>
    </div>

    <script src="JS/jquery.js"></script>
    <script src="JS/slider.js"></script>

</body>

CSS3

.wrapper {
    width: 990px;
    margin: 0 auto;
}

#slider{
    width: 990px;
    height: 270px;
    overflow: hidden;
    margin: 30px auto;
}

#slider > img {
    width: 990px;
    height: 270px;
    float: left;
    display: none;
}

a {
    padding: 5px 10px;
    background-color: #F0F0F0;
    margin-top: 30px;
    text-decoration: none;
    color: #666;
}

a.left {
    float: left;
}

a.right {
    float: right;
}

的JavaScript

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
    $('#slider > img#1').fadeIn(300)
    startSlider();
});

function startSlider(){
    count = $('#slider > img').size();

    loop = setInterval(function(){

        if(sliderNext > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        $('#slider > img').fadeOut(300);
        $('#slider > img#' + sliderNext).fadeIn(300);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;

    }, 3000)
}

function prev() {
    newSlide = sliderInt - 1;
    showSlide(newSlide);
}

function next() {
    newSlide = sliderInt + 1;
    showSlide(newSlide);
}

function stopLoop() {
    window.clearInterval(loop);
}

function showSlide(Id) {
    stopLoop();
    if(Id > count){
            sliderNext = 1;
            sliderInt = 1;
        }

        else if(Id < 1){
            Id = count;
        }

        $('#slider > img').fadeOut(300);
        $('#slider >img#' + Id).fadeIn(300);

        sliderInt = Id;
        sliderNext = Id + 1;
        startSlider();
}

$('#slider > img').hover(
    function() {
        stopLoop();
    },
    function(){
        startSlider();
    }
);

Answer 1

问题在于showSlide()功能中的if-else语句。它应该是：

if (Id > count) {
    Id = 1;
} else if (Id < 1) {
    Id = count;
}

jsfiddle

BTW：我认为您可以像这样简化HTML和JQuery代码：jsfiddle

单击最后一张幻灯片上的下一步结束幻灯片放映

1 个答案: