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

Question

i found a template what kinda works like powerpoint but then for browsers, after i tried this i wanted to get the content out of a db with ajax and have my slider content up to date. 我找到了一个类似于powerpoint的模板，但是对于浏览器，然后尝试了此操作之后，我想用ajax从db中获取内容，并使滑块内容保持最新。

the problem is the slider works with divs , it adds classes to each div to see which divs slides are, but i guess my divs are made after the slide code... 问题是滑块适用于div，它向每个div添加类以查看哪些div幻灯片，但是我想我的div是在幻灯片代码之后制作的...

so when i run this my page just looks like a normal webpage , all the divs under each other instead of hided like it should be... 所以当我运行这个页面时，我的页面看起来就像是一个普通的网页，所有的div相互之间，而不是像它应该被隐藏一样。

when i code my divs at the home page everything works fine. 当我在主页上编码div时，一切正常。

this is my homepage.php : 这是我的homepage.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>

my slideshow js : 我的幻灯片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;
        }
    });
});

and my ajax call in another js file : 和我的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>"
                );
     }
    }
});
});

EDIT : 编辑：

editing the init part to a function and calling this function after the succes also does not work : 将init部分编辑为函数并在成功后调用此函数也不起作用：

var thisSlidePointer;
var lastSlidePointer;

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

Answer 1

You need to call the INIT SLIDESHOW section (from the slideshow script) in the success function, right after you added your divs. 添加div之后，您需要在成功函数中调用INIT SLIDESHOW部分（通过幻灯片脚本）。 (and of course remove it from the original script) Also, You need to add all the initialization lines. （当然，也可以将其从原始脚本中删除）此外，您需要添加所有初始化行。

I suggest you add an Init function (remamber to declare all var's outside the function), also, since you call the function only after you get success ajax call you can remove it from the $(function() {}) block: 我建议您添加一个Init函数（删除以在函数外声明所有var的内容），而且，由于仅在成功执行ajax调用后才调用该函数，因此可以将其从$(function() {})块中删除：

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

Answer 2

Code from @tal worked! @tal的代码有效！

still had to edit that this piece of code got declared outside the init function 仍然需要编辑这段代码是在init函数之外声明的

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-04-14 15:52:00

解决方案2
0 2017-04-14 19:30:25

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-04-14 15:52:00

解决方案2 0 2017-04-14 19:30:25

解决方案1
0 已采纳 2017-04-14 15:52:00

解决方案2
0 2017-04-14 19:30:25