0

我在尝试将其用作 Google Chrome 中的基本图像滑块的一些代码时遇到问题。

我的 HTML 如下 -

<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
    <link rel="stylesheet" href="css/gallery.css">
</head>
<body>

    <div class="wrapper">


    <div id="slider">
        <Img id="1" src="images/slide1.jpg">
        <Img id="2" src="images/slide 2.jpg">
        <Img id="3" src="images/slide 3.jpg">
    </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/gallery.js"></script>

</body>
</html>

这是我的 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 showSlide(){
    if(id>count){
        id=1;
    }else if(id<1){
        id=count;
    }

    $("#slider>Img").fadeOut(300);
    $("#slider>Img#" + id).fadeIn(300);

    sliderInt=id;
    sliderNext=id + 1;

}

但是，当我单击下一个/上一个文本时，什么也没有发生。

有什么建议吗？

PS。这是我第一次尝试 html 和 java。

非常感谢

4

3 回答 3

1

打开谷歌浏览器控制台（ctrl+shift+I），你会看到 javascript 错误。

  1. 使用 onclick 属性是个坏主意。您可以使用 jQuery 事件。类似的东西： $(".left").on("click", prev);

  2. $("#slider>Img").fadeOut(300); $("#slider>Img#" + sliderNext).fadeIn(300);

这是错误的，因为第二行将在第一行完成之前开始使用此代码：

$("#slider>Img").fadeOut(300);
setTimeout(function() {
    $("#slider>Img#" + sliderNext).fadeIn(300);
}, 300);

或者

$.when( $("#slider>Img").fadeOut(300); )
 .done( $("#slider>Img#" + sliderNext).fadeIn(300); );
于 2013-11-14T12:10:43.957 回答
0

我会在按钮的 html 中删除 onclick 的属性，并在 jquery 中添加一个侦听器，因为我觉得将所有 jquery/javascript 保存在一个地方更容易。

在这里看小提琴：http: //jsfiddle.net/h25z9/

$(".right").click(function(){
   prev(); 
});
 $(".left").click(function(){
   next(); 
})

这在 jsfiddle 上不起作用，因为我没有所有资源，但是您应该看到我对代码所做的更改。

于 2013-11-14T12:05:23.137 回答
0

setInterval 没有得到计数变量。startSlider 运行，初始化 setInterval 并结束。计数不会保存在更全局的位置，例如函数之外。它在函数结束时被销毁。因此，代替上面的代码，您应该：

var count = 0;

function startSlider(){
}

或者

setInterval(function(count){

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

        $("#slider>Img").fadeOut(300);
        $("#slider>Img#" + sliderNext).fadeIn(300);

        sliderInt=sliderNext;
        sliderNext=sliderNext + 1;

    },3000, count);

如果它仍然不起作用，你有问题，你的逻辑可能有问题。

于 2013-11-14T12:18:27.460 回答