html - Javascript/php 轮播无法正常工作

标签 html php javascript image

我正在为网页编写幻灯片/轮播。我刚开始让 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/

相关文章:

php - 代码点火器 : update function model and controller

phpMyAdmin "Cannot log in to the MySQL server"与 PHP 7.0.0 RC7

javascript - 使用 forEach 显示 React Native Maps 中的标记

html - 如何限制 div 内的文本和元素

php - Osticket:如何使用 "OR"约束过滤票证

html - 用于确定什么可能是网站上的 Logo 的启发式方法?

javascript - 为什么bind会修复“"failed to execute ' fetch' on 'Window'非法调用”错误?

javascript - 如何用javascript替换HTML字符串中的字符

html - 表单输入未使用 Bootstrap 4 排列

java - Selenium WebDriver 无法通过链接文本找到元素