0
をロードしました。私はこれを実行すると...そうjQueryのスライダーは、私はちょっとパワーポイントのように動作しますが、私はこれを試した後、その後のブラウザのために、私はAjaxでDBの外にコンテンツを取得し、これまでに私のスライダーコンテンツを持っていると思ったものをテンプレートを見つけ
問題は、スライドがあるのdivかを確認するために、各div要素にクラスを追加し、スライダーはdivタグで動作しますが、私は私のdivは、スライドコードの後に作られています推測する私ページはちょうど普通のウェブページのように見えますが、そのように隠れているのではなく、お互いの下にあるすべてのdiv ...
私はホームページのdivをコードします。
<!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>"
);
}
}
});
});
EDIT：
この
は私のhomepage.phpですinit pを編集する機能への芸術と大成功の後にこの関数を呼び出すも動作しません：あなたはあなたのdivを追加した直後に、成功関数の（スライドショーのスクリプトから）INITスライドショーセクションを呼び出す必要が
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ファイルから呼び出すことはできません... –