Chrome JavaScript Slider问题

我遇到了一些我正在尝试构建的滑块问题。基本上，它会自动滚动图像，但是下一个和前一个箭头根本没有任何效果。Chrome JavaScript Slider问题

我得到这个错误被点击下一页时 -

未捕获的ReferenceError：ID没有被定义gallery.js：48 event.returnValue已被弃用。请改用标准的event.preventDefault（）。未捕获的ReferenceError：ID没有被定义

这里是小提琴链接 - http://jsfiddle.net/8L5xA/

但这里是我的HTML和JS -

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>

这是JS

sliderInt=1; 
sliderNext=2; 

$(document).ready(function(){ 
    $("#slider>img#1").fadeIn(300); 
    startSlider(); 
    $(".right").click(function(){ 
     next(); 
    }); 
    $(".left").click(function(){ 
     next(); 
    }); 
}); 

var count=0; 

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; 

}

我只是一个初学者，任何帮助将非常感激。

非常感谢

来源

2013-11-14 RJcreatives

有很多你的代码逻辑上的错误，我在这里调整，但

CODE：

sliderInt = 1; 
sliderNext = 2; 
var count = 0; 
var loop; 

$(document).ready(function() { 
    $("#slider>img#1").fadeIn(300); 
    startSlider(); 
    $(".right").click(function (event) { 
    //alert("clicked next"); 
     next(); 
     event.preventDefault(); 
    }); 
    $(".left").click(function (event) { 
    prev(); 
    event.preventDefault(); 
    }); 
}); 



function startSlider() { 
count = $("#slider>Img").size(); 
delayCall(); 

} 

function delayCall() { 
    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() { 
    // alert("previous"); 
    clearInterval(loop); 
    if (sliderInt == 1) newSlide = count; 
    else newSlide = sliderInt - 1; 
    showSlide(newSlide); 
} 

function next() { 
    // alert(sliderInt+":"+count); 
    clearInterval(loop); 
    if (sliderInt == count) sliderInt = 0; 
     newSlide = sliderInt + 1; 
     showSlide(newSlide); 
} 

function showSlide(id) { 
    // alert(id+":"+count); 
    /* if(id>count){ 
     id=1; 
     }else{ 
     id; 
    }*/ 

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

    //Thread.sleep(3000); 
    sliderInt = id; 
    sliderNext = id + 1; 
    delayCall(); 

}

FIDDLE： http://jsfiddle.net/8L5xA/4/

您的代码无关与Chrome浏览器，只是逻辑是错误的，就是这样。我已在Firefox 25.0和Chrome 30.0.1599.101上验证了此代码，并且工作顺利，希望能够解决您的问题。

编码快乐:)

来源

2013-11-14 14:16:09 dreamweiver

谢谢你这么多：d就像我刚才说我是新来这个，所以希望我会有这些错误较少。典型的情况是，在试图弄清楚什么是7小时后，你很容易回答。 – RJcreatives

在创建应用程序时，语法并不是一个难题，所有你应该知道的都是正确的逻辑。无论如何，所有与您的应用程序最好:) – dreamweiver

上线

showSlide(newSlide);

你通过INT newSlide，但在功能上的定义，你不捕捉任何参数。

变化

function showSlide(){

到

function showSlide(id){

希望这有助于

来源

2013-11-14 13:41:22

Chrome JavaScript Slider问题

回答

相关问题