Javascript jQuery图像滑块问题_Javascript_Jquery_Image_Slider_Slideshow

Javascript jQuery图像滑块问题

javascript jquery image

Javascript jQuery图像滑块问题,javascript,jquery,image,slider,slideshow,Javascript,Jquery,Image,Slider,Slideshow,我的图像滑码有问题。每当我按下“下一步”或“上一步”按钮时，我都必须单击3次，直到按钮工作为止，完成此操作后，它将完美地工作。这是我的密码： sliderInt=1; sliderNext=2; $(document).ready(function(){ $('.slider>img#'+sliderInt).stop().fadeIn(500).delay(0); startSlider(); }); function star

我的图像滑码有问题。每当我按下“下一步”或“上一步”按钮时，我都必须单击3次，直到按钮工作为止，完成此操作后，它将完美地工作。这是我的密码：

    sliderInt=1;
    sliderNext=2;

    $(document).ready(function(){
    $('.slider>img#'+sliderInt).stop().fadeIn(500).delay(0);
    startSlider();
    });

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

    loop=setInterval(function(){
    $(".slider>img#"+sliderInt).stop().fadeOut(500);

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

    $(".slider>img#"+sliderNext).stop().fadeIn(500).delay(0);
    sliderNext++;
    sliderInt=sliderNext-1;
    },5000);
    }
    function prev(){
        stopLoop();
        $(".slider>img#"+sliderInt).stop().fadeOut(500);
        sliderInt--;
        if(sliderInt<1){
            sliderInt=count;
        }
        $(".slider>img#"+sliderInt).stop().fadeIn(500);
            startSlider();
        }
    function next(){
        stopLoop();
        $(".slider>img#"+sliderNext).stop().fadeOut(500);
        sliderNext++;
        if(sliderNext>count){
            sliderNext=1;
        }
        $(".slider>img#"+sliderNext).stop().fadeIn(500);
        startSlider();
        }
    function stopLoop(){
        window.clearInterval(loop);
    }

sliderInt=1；
sliderNext=2；
$（文档）.ready（函数（）{
$（'.slider>img#'+sliderInt）.stop（）.fadeIn（500）.delay（0）；
startSlider（）；
});
函数startSlider（）{
计数=$（“.slider>img”）.size（）；
循环=设置间隔（函数（）{
$（“.slider>img#”+sliderInt.stop（）.fadeOut（500）；
如果（sliderNext>count）{
sliderNext=1；
}
$（“.slider>img#”+sliderNext.stop（）.fadeIn（500）.delay（0）；
sliderNext++；
SliderNet=sliderNext-1；
},5000);
}
函数prev（）{
stopLoop（）；
$（“.slider>img#”+sliderInt.stop（）.fadeOut（500）；
滑块--；
如果（滑块计数）{
sliderNext=1；
}
$（“.slider>img#”+sliderNext.stop（）.fadeIn（500）；
startSlider（）；
}
函数stopLoop（）{
清除间隔（循环）；
}

这应该可以：

<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

var index = 0;
var intervalID = null;

$(document).ready(function() {
    $(".slider img").hide();
    $(".slider img").first().addClass("active").show();

    startloop();
});

function startloop() {
    intervalID = setInterval(function() {
        next();
    }, 5000);
}

function stoploop() {
    clearInterval(intervalID);
}

function next() {     
    $(".slider img.active").removeClass("active").fadeOut(function() {
        index++;

        if(index == $(".slider img").length) {
            index = 0;
            $(this)
            $(".slider img").first().addClass("active").fadeIn();
        } else {
            $(this).next().fadeIn().addClass("active");
        }
    });
}

function prev() {       
    $(".slider img.active").removeClass("active").fadeOut(function() {
        index--

        if(index < 0) {
            index = $(".slider img").length-1;
            $(this)
            $(".slider img").last().addClass("active").fadeIn();
        } else if(index == $(".slider img").length) {
            index = 0;
            $(this)
            $(".slider img").first().addClass("active").fadeIn();
        } else {
            $(this).prev().fadeIn().addClass("active");
        }
    });
}

</script>
</head>
<body>
    <div class="slider" > 
        <a href="#" onclick="prev();stoploop();">prev</a> 
        <a href="#" onclick="next();stoploop();">next</a>
        <br>
        <img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" title="1"/>
        <img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-3.jpg" title="2"/> 
        <img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-2.jpg" title="3"> 
        <img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-5.jpg" title="4"> 
    </div>
</body>
</html>


var指数=0；
var intervalID=null；
$（文档）.ready（函数（）{
$（“.slider img”）.hide（）；
$（“.slider img”）.first（）.addClass（“active”）.show（）；
startoop（）；
});
函数startoop（）{
intervalID=setInterval（函数（）{
next（）；
}, 5000);
}
函数stoploop（）{
clearInterval（intervalID）；
}
函数next（）{
$（“.slider img.active”）.removeClass（“active”）.fadeOut（函数（）{
索引++；
如果（索引==$（“.slider img”）.length）{
指数=0；
$（本）
$（“.slider img”）.first（）.addClass（“active”）.fadeIn（）；
}否则{
$（this）.next（）.fadeIn（）.addClass（“活动”）；
}
});
}
函数prev（）{
$（“.slider img.active”）.removeClass（“active”）.fadeOut（函数（）{
索引--
如果（指数<0）{
索引=$（“.slider img”）.length-1；
$（本）
$（“.slider img”）.last（）.addClass（“active”）.fadeIn（）；
}else if（索引==$（“.slider img”）.length）{
指数=0；
$（本）
$（“.slider img”）.first（）.addClass（“active”）.fadeIn（）；
}否则{
$（this.prev（）.fadeIn（）.addClass（“活动”）；
}
});
}

HTML代码看起来如何？如果您在开始时将SliderText=0而不是2，这会改变什么吗？将SliderText更改为=0后的Html代码“Previous”按钮工作得很好，但不幸的是，第一个图像后的图像已更改为空白，因为它现在为0，只需以id=“0”而不是id=“1”开始即可在html代码中：）在将其更改为0后，是否可以发布编辑的代码？我在谈论jQuery代码！我编辑了答案，因此取而代之的是onclick调用stoploop（），否则它将在停止循环之前只循环一次。