Chrome JavaScript Slider問題

Question

我嘗試構建的滑塊遇到麻煩。 基本上，它可以自動滾動瀏覽圖像，但是下一個和上一個箭頭完全沒有作用。

單擊下一步時出現此錯誤-

未捕獲的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;

}

我只是一個初學者，任何幫助將不勝感激。

非常感謝

Answer 1

在線上

showSlide(newSlide);

您傳遞了int newSlide，但是在函數定義上，您沒有捕獲任何參數。

更改

function showSlide(){

至

function showSlide(id){

希望這可以幫助

Answer 2

您的代碼中存在很多邏輯錯誤，我在這里進行了調整

碼：

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

 }

內容： http : //jsfiddle.net/8L5xA/4/

您的代碼與Chrome瀏覽器無關，只是邏輯錯誤而已。 我已經在Firefox 25.0和Chrome 30.0.1599.101上驗證了此代碼，並且可以正常工作，希望這可以解決您的問題。

快樂編碼:)

Chrome JavaScript Slider問題

問題描述

2 個解決方案

解決方案1
0 2013-11-14 13:41:22

解決方案2
0 已采納 2013-11-14 14:16:09

Chrome JavaScript Slider問題

問題描述

2 個解決方案

解決方案1 0 2013-11-14 13:41:22

解決方案2 0 已采納 2013-11-14 14:16:09

解決方案1
0 2013-11-14 13:41:22

解決方案2
0 已采納 2013-11-14 14:16:09