0
我发现一个模板什么样的作品像powerpoint，但对于浏览器，然后我试过这个我想要得到的内容与ajax数据库，并有我的滑块内容最新。Jquery滑块添加页面加载后的幻灯片
问题是滑块可与div的，它增加了班每个div来看看哪些div的幻灯片，但我想我的div的幻灯片代码后进行...
所以，当我跑我这页面只是看起来像一个正常的网页，所有的div下彼此而不是隐藏像它应该是...
当我在主页上编码我的div一切工作正常。
这是我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>
幻灯片演示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>"
);
}
}
});
});
编辑：
编辑init p艺术的功能和调用更迭后，此功能也不起作用：
var thisSlidePointer;
var lastSlidePointer;
init = function() {
$slides.hide();
thisSlidePointer = 1;
lastSlidePointer = $slides.length;
$currentSlide = $firstSlide.show().addClass(ID.current);
updateCounter();
}
我无法存取权限我瓦尔有外面？ –
您可以将此部分放入Init（）函数中，并从ajax脚本中的success部分调用它。 只记得在函数外面声明'thisSlidePointer'和'lastSlidePointer'。 – Tal
但是当我在那个文件中创建我的函数init时，我无法从我的ajax文件调用它... –