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問題

回答

相關問題