jQuery动画函数在我的jQuery滑块中不起作用

jQuery Animation function is not working in my jquery slider

本文关键字：jQuery 不起作用 我的 动画 函数      更新时间：2023-09-26

我是jQuery和web开发的初学者。我对jquery的animate函数有一些问题。我还在这里制作了一把小提琴：-jsFiddle下面是脚本的主要功能：-我还没有添加完整的脚本，因为这可能是css的问题，因为我是一个初学者

$(document).ready(function(){
    var showImage=function(photoObject,direction,maincontainer){
    alert("I am Also Called");
    animating=true;
    if(direction=="next"){
        maincontainer.animate({"left":"1080px"},slideshowspeed,linear,function(){
        alert("I am also called");
        $("#slider_caption").css({
        "background-image" : "photoObject.image"
        });
        });
    }
  };
});

您有很多语法错误：

  1. }关闭错误
  2. 不检查maincontainer是否存在
var slideshowspeed=6000;
//variable to store the images we need to set as background
//which also includes some text and url's.
//speed of the automatic slideshow
var photos = [
  {
    "title" : "Stairs",
    "image" : "image1.jpg",
    "firstline" : "Going on",
    "secondline" : "vacation?"
  }, {
    "title" : "Office Appartments",
    "image" : "image2.jpg",
    "firstline" : "Or still busy at",
    "secondline" : "work?"
  }, {
    "title" : "Mountainbiking",
    "image" : "image3.jpg",
    "firstline" : "Get out and be",
    "secondline" : "active"
  }, {
    "title" : "Mountains Landscape",
    "image" : "image1.jpg",
    "firstline" : "Take a fresh breath of",
    "secondline" : "nature"
  }, {
    "title" : "Italian pizza",
    "image" : "image2.jpg",
    "firstline" : "Enjoy some delicious",
    "secondline" : "food"
  }
];
$(document).ready(function(){
  $("#next").click(function(){
    alert("dash is a strategical boy");
    navigate("next");
  });
});
$("#prev").click(function(){
  alert("dash is a strategical boy from prev");
  navigate("back");
});
var currentImg=0;
animating=false;
var navigate = function(direction) {
  if(animating) {
    return;
  }
  if(direction == "next") {
    currentImg++;
    alert("I am inside Next");
    if(currentImg == photos.length + 1) {
      currentImg = 1;
    }
  } else {
    currentImg--;
    alert("I am inside prev");
    if(currentImg === 0) {
      currentImg = photos.length;
    }
  }
  var maincontainer=$("#slider_caption");
  showImage(photos[currentImg - 1],direction);
};
var showImage = function(photoObject,direction,maincontainer){
  alert("I am Also Called");
  animating = true;
  if (direction == "next") {
    if (maincontainer)
      maincontainer.animate({"left":"1080px"},slideshowspeed,linear,function(){
        alert("I am also called");
        $("#slider_caption").css({
          "background-image" : "photoObject.image"
        });
      });
  }
};
相关文章：