我正在为网页编写幻灯片/轮播。我刚开始让 PHP 遍历一个图像文件夹,这样我就可以使用幻灯片放映未定义数量的图像。不幸的是,由于对 PHP for 循环进行了更改,我的 JavaScript 应该在到达最后一张照片时开始播放幻灯片,但它不起作用。我有一种感觉,我对 PHP 的使用弄乱了我的 DOM 结构,但我不确定如何确定这是否是问题所在,如果是,如何修复它。这是 PHP:
<div class="slider">
<?php
$output = '';
$dir = dirname(__FILE__).'/img';
$images = scandir($dir);
if($images)
{
foreach($images as $image)
{
if(in_array($image,array('.','..'))) continue;
?>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#"><img src="img/<?php echo $image ?>" ></a>
</div>
</div>
</div>
</div>
<?php
}
}
?>
这是允许我浏览照片的 JS:
var carousel = function() {
/*$('.tabs').children().children().click(function() {
$(this).siblings().removeClass('.active');
$(this).addClass('.active');
});*/
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length == 0)
{
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(750).removeClass('active-slide');
nextSlide.fadeIn(750).addClass('active-slide');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(750).removeClass('active-slide');
prevSlide.fadeIn(750).addClass('active-slide');
});
};
window.onload = carousel();
感谢任何帮助。谢谢, 扎卡里·梅森
最佳答案
事实证明我只是错过了一个结果是不小心将我的箭头添加到它试图显示的图像列表中......无论如何谢谢!
关于html - Javascript/php 轮播无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34211624/