Question

我找到了一个模板，有点像powerpoint，然后是浏览器，在我尝试了这个之后我想用ajax从db中获取内容并让我的滑块内容保持最新。

问题是滑块与div一起工作，它为每个div添加类以查看哪些div是幻灯片，但我想我的div是在幻灯片代码之后制作的......

所以当我运行这个时，我的页面看起来就像一个普通的网页，所有的div都在彼此之下，而不是像它应该隐藏...

当我在主页上编码我的div时，一切正常。

这是我的主页.php：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Biesmans</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="bootstrap/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/home.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body id="simpleslides">

</body>
</html>

我的幻灯片js：

$(function() {

    var ID = {
        slideshow : 'simpleslides',
        slide : 'slide',
        counter : 'counter',
        navigation : 'navigation',
        next : 'next',
        previous : 'previous',
        current : 'current'
    };

    var labels = {
        next : '&rarr;',
        previous : '&larr;',
        separator : ' / '
    };

    var $slideshow = $('#'+ID.slideshow);
    var $slides = $slideshow.children().addClass(ID.slide);
    var $currentSlide;
    var $firstSlide = $slides.first();
    var $lastSlide = $slides.last();

    $slideshow.append($('<div>').attr('id',ID.next).addClass(ID.navigation).html(labels.next));
    $slideshow.append($('<div>').attr('id',ID.previous).addClass(ID.navigation).html(labels.previous));
    $slideshow.append($('<div>').attr('id',ID.counter));

    var $counter = $('#'+ID.counter);
    var $next = $('#'+ID.next);
    var $previous = $('#'+ID.previous);



    /*** FUNCTIONS ***/

    var updateCounter = function() {
// updates the counter
        $counter.text(thisSlidePointer + labels.separator + lastSlidePointer);
    }

    var hideCurrentSlide = function() {
// hide the current slide
        $currentSlide.fadeOut().removeClass(ID.current);
    }

    var nextSlide = function() {
// hide current slide
        hideCurrentSlide();

// get the next slide
        var nextSlide = $currentSlide.next();

// not the last slide => go to the next one and increment the counter
        if ( thisSlidePointer != lastSlidePointer ) {
            nextSlide.fadeIn().addClass(ID.current);
            $currentSlide = nextSlide;
            thisSlidePointer++;
        }
        else {
// is the last slide => go back to the first slide and reset the counter.
            $firstSlide.fadeIn().addClass(ID.current);
            $currentSlide = $firstSlide;
            thisSlidePointer = 1;
        }

// update counter
        updateCounter();
    }

    var previousSlide = function() {
// hide current slide
        hideCurrentSlide();

// get the previous slide
        var previousSlide = $currentSlide.prev();

// If not the first slide, go to the previous one and decrement the counter
        if ( thisSlidePointer != 1 ) {
            previousSlide.fadeIn().addClass(ID.current);
            $currentSlide = previousSlide;
            thisSlidePointer--;
        }
        else {
// This must be the first slide, so go back to the last slide and set the counter.
            $lastSlide.fadeIn().addClass(ID.current);
            $currentSlide = $lastSlide;
            thisSlidePointer = lastSlidePointer;
        }

// update counter
        updateCounter();
    }

    /*** INIT SLIDESHOW ***/

// Initially hide all slides
    $slides.hide();

// The first slide is number first!
    var thisSlidePointer = 1;

// The last slide position is the total number of slides
    var lastSlidePointer = $slides.length;

// The first slide is always the first slide! So let's make visible and set the counter
    $currentSlide = $firstSlide.show().addClass(ID.current);
    updateCounter();


    /*** EVENTS ***/

// "next" arrow clicked => next slide
    $next.click(nextSlide);

// "previous" arrow clicked => previous slide
    $previous.click(previousSlide);

// Add keyboard shortcuts for changing slides
    $(document).keydown(function(e){
        if (e.which == 39) {
// right key pressed => next slide
            nextSlide();
            return false;
        }
        else if (e.which == 37) {
// left key pressed => previous slide
            previousSlide();
            return false;
        }
    });
});

和我的ajax调用另一个js文件：

$(document).ready(function () {
    $("#simpleslides").html("");
    $.ajax({
        url: "index.php/projecten/getprojecten",
        type: "POST",
        success: function (data) {
            var projecten = jQuery.parseJSON(data);
            for (i = 0; i < projecten.length; i++) {
                $("#simpleslides").append(
                    "<div>"
                    + "slider content here"
                    + "</div>"
                );
     }
    }
});
});

编辑：

将init部分编辑为函数并在成功后调用此函数也不起作用：

var thisSlidePointer;
var lastSlidePointer;

init = function () {
    $slides.hide();
    thisSlidePointer = 1;
    lastSlidePointer = $slides.length;
    $currentSlide = $firstSlide.show().addClass(ID.current);
    updateCounter();
}

Answer 1

在添加div之后，您需要在成功功能中调用 INIT SLIDESHOW 部分（来自幻灯片演示脚本）。（当然从原始脚本中删除它）此外，您需要添加所有初始化行。

我建议你添加一个Init函数（重新发送以声明函数外的所有var），因为你只有在成功ajax调用后才能调用该函数，你可以从$(function() {})中删除它块：

＆＃13;

var thisSlidePointer;
var lastSlidePointer;
var $slideshow;
var $slides;
var $currentSlide;
var $firstSlide;
var $lastSlide; 
var $counter;
var $next;
var $previous;

var ID = {
  slideshow : 'simpleslides',
  slide : 'slide',
  counter : 'counter',
  navigation : 'navigation',
  next : 'next',
  previous : 'previous',
  current : 'current'
};

var labels = {
  next : '&rarr;',
  previous : '&larr;',
  separator : ' / '
};


/*** FUNCTIONS ***/
var updateCounter = function() {
  // updates the counter
  $counter.text(thisSlidePointer + labels.separator + lastSlidePointer);
}

var hideCurrentSlide = function() {
  // hide the current slide
  $currentSlide.fadeOut().removeClass(ID.current);
}

var nextSlide = function() {
  // hide current slide
  hideCurrentSlide();

  // get the next slide
  var nextSlide = $currentSlide.next();

  // not the last slide => go to the next one and increment the counter
  if ( thisSlidePointer != lastSlidePointer ) {
    nextSlide.fadeIn().addClass(ID.current);
    $currentSlide = nextSlide;
    thisSlidePointer++;
  }
  else {
  // is the last slide => go back to the first slide and reset the counter.
    $firstSlide.fadeIn().addClass(ID.current);
    $currentSlide = $firstSlide;
    thisSlidePointer = 1;
  }

  // update counter
  updateCounter();
}

var previousSlide = function() {
  // hide current slide
  hideCurrentSlide();

  // get the previous slide
  var previousSlide = $currentSlide.prev();

  // If not the first slide, go to the previous one and decrement the counter
  if ( thisSlidePointer != 1 ) {
    previousSlide.fadeIn().addClass(ID.current);
    $currentSlide = previousSlide;
    thisSlidePointer--;
  }
  else {
    // This must be the first slide, so go back to the last slide and set the counter.
    $lastSlide.fadeIn().addClass(ID.current);
    $currentSlide = $lastSlide;
    thisSlidePointer = lastSlidePointer;
  }

  // update counter
  updateCounter();
}

/*** EVENTS ***/
// Add keyboard shortcuts for changing slides
$(document).keydown(function(e){
  if (e.which == 39) {
    // right key pressed => next slide
    nextSlide();
    return false;
  }
  else if (e.which == 37) {
    // left key pressed => previous slide
    previousSlide();
    return false;
  }
});

var init = function () {
  $slideshow = $('#'+ID.slideshow);
  $slides = $slideshow.children().addClass(ID.slide);
  $firstSlide = $slides.first();
  $lastSlide = $slides.last();
  
  $slideshow.append($('<div>').attr('id',ID.next).addClass(ID.navigation).html(labels.next));

  $slideshow.append($('<div>').attr('id',ID.previous).addClass(ID.navigation).html(labels.previous));

  $slideshow.append($('<div>').attr('id',ID.counter));

  $counter = $('#'+ID.counter);
  $next = $('#'+ID.next);
  $previous = $('#'+ID.previous);

  $slides.hide();
  thisSlidePointer = 1;
  lastSlidePointer = $slides.length;
  $currentSlide = $firstSlide.show().addClass(ID.current);
  updateCounter();
  
  /*** EVENTS ***/
  // "next" arrow clicked => next slide
  $next.click(nextSlide);

  // "previous" arrow clicked => previous slide
  $previous.click(previousSlide);
}

＆＃13;

Answer 2

来自@tal的代码工作了！

仍然需要编辑这段代码在init函数之外声明

$counter = $('#'+ID.counter);
$next = $('#'+ID.next);
$previous = $('#'+ID.previous);

Jquery滑块在页面加载后添加幻灯片

2 个答案: