【发布时间】：2017-04-15 17:49:44
【问题描述】：
我找到了一个有点像 powerpoint 的模板，但是对于浏览器，在我尝试了这个之后，我想用 ajax 从数据库中获取内容，并让我的滑块内容保持最新。
问题是滑块与 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 : '→',
previous : '←',
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;
}
});
});
和我在另一个 js 文件中的 ajax 调用：
$(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>"
);
}
}
});
});
编辑：
将初始化部分编辑为函数并在成功后调用此函数也不起作用：
var thisSlidePointer;
var lastSlidePointer;
init = function () {
$slides.hide();
thisSlidePointer = 1;
lastSlidePointer = $slides.length;
$currentSlide = $firstSlide.show().addClass(ID.current);
updateCounter();
}
【问题讨论】：
标签： javascript jquery