Javascript onclick问题？_Javascript_Jquery_Html_Onclick_Slider

Javascript onclick问题？

javascript jquery html

Javascript onclick问题？,javascript,jquery,html,onclick,slider,Javascript,Jquery,Html,Onclick,Slider,我有一个问题的一些代码，我正试图使用谷歌浏览器作为一个基本的图像滑块我的HTML如下- <!DOCTYPE html> <html> <head> <title>Gallery</title> <link rel="stylesheet" href="css/gallery.css"> </head> <body> <div class="wrapper">

我有一个问题的一些代码，我正试图使用谷歌浏览器作为一个基本的图像滑块

我的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;

}

sliderInt=1；
sliderNext=2；
$（文档）.ready（函数（）{
$（“#slider>img#1”）.fadeIn（300）；
startSlider（）；
});
函数startSlider（）{
计数=$（“#滑块>Img”）.size（）；
循环=设置间隔（函数（）{
如果（sliderNext>count）{
sliderNext=1；
滑块=1；
}
$（“#滑块>Img”）.fadeOut（300）；
$（“#slider>Img#”+sliderNext）.fadeIn（300）；
sliderInt=sliderNext；
sliderNext=sliderNext+1；
},3000);
}
函数prev（）{
newSlide=slident-1；
放映幻灯片（新闻幻灯片）；
}
函数next（）{
newSlide=slident+1；
放映幻灯片（新闻幻灯片）；
}
函数showSlide（）{
如果（id>计数）{
id=1；
}否则，如果（id我将删除按钮html中onclick on的属性，
而是在jquery中添加一个listner，因为我觉得将所有jquery/javascript放在一个地方更容易
请看这里的小提琴：
这在JSFIDLE上不起作用，因为我没有所有的资源，但您应该看到我对代码所做的更改。
打开Google Chrome控制台（ctrl+shift+i），您将看到javascript错误
使用onclick属性是个坏主意。
您可以使用jQuery事件。
类似于：$（“.left”）。在（“单击”，上一页）
$（“#滑块>Img”）.fadeOut（300）；
$（“#slider>Img#”+sliderNext）.fadeIn（300）
这是错误的，因为第二行将在第一行完成之前开始
使用此代码：
$("#slider>Img").fadeOut(300);
setTimeout(function() {
    $("#slider>Img#" + sliderNext).fadeIn(300);
}, 300);

或
setInterval不获取count变量。startSlider运行、初始化setInterval并结束。计数不会保存在更全局的位置，例如在函数外部。它会随着函数的结束而被销毁。因此，您应该：
var count = 0;

function startSlider(){
}

或
如果它仍然不起作用，则说明您的逻辑有问题。
对此进行修改。……请阅读，然后告诉我们它显示了什么错误。函数showsiled（）中的id是什么slide 2.jpg
->slide2.jpg
？确保在声明变量时使用var
——即var sliderInt=1；。良好的编码实践。感谢您的快速回答。我已经按照您的建议更改了代码，但我的结果没有看到任何变化：/您在控制台中得到了什么吗？（F12）未捕获引用错误：id未定义事件。returnValue已弃用。请使用标准事件。preventDefault（）未捕获引用错误：id未定义确定，这些错误包含在其他答案中。请提交一个包含这些错误的新问题，因为它们不属于“Javascript onclick问题”
$.when( $("#slider>Img").fadeOut(300); )
 .done( $("#slider>Img#" + sliderNext).fadeIn(300); );

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);