Chrome JavaScript Slider issue

本文关键字：issue Slider JavaScript Chrome 更新时间：2023-09-26

我在尝试构建滑块时遇到问题。基本上，它可以很好地自动滚动图像，但是下一个和上一个箭头根本没有效果。

单击"下一步"时出现此错误 -

未捕获的引用错误：未定义 id 库.js：48event.returnValue 已弃用。请改用标准 event.preventDefault（）。未捕获的引用错误：未定义 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;
}

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

非常感谢

你的代码中有很多逻辑错误，我在这里调整了它

法典：

 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上验证了此代码，并且它运行顺利，希望这可以解决您的问题。

快乐编码:)

在线

showSlide(newSlide);

你传递了 int newSlide，但是在函数定义上，您不会捕获任何参数。

改变

function showSlide(){

自

function showSlide(id){

希望这有帮助