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文件調用它... –