Question

我的幻灯片显示全部设置但是当我单击下一个图像上的下一个或上一个按钮时，按钮会缩小并变成小灰色框。有谁知道为什么会这样？

PHP / HTML

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if ($_POST['action'] == 'Previous') {
        $index = $_POST['i'];
        if ($index == 0) {
            $index = count($pic_array) - 1;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>
                  </div>";
        }
        else {
            $index--;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
           <input type='hidden'  name='i' value= '$index'>
           </form>";

    }
    if ($_POST['action'] == "Next") {
        $index = $_POST['i'];
        if ($index == count($pic_array) - 1) {
            $index = 0;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        else {
            $index++;
            echo "<div class='slide'>
                     <img src= ".$dir.$pic_array[$index]." />
                     <div class='slide-caption'>
                        <h3 class='slide-title'> $titles[$index] </h3>
                        <p class='des'> $descriptions[$index] </p>
                     </div>";
        }
        echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
             <input type='hidden'  name='i' value= '$index'>
             </form>";
    }

} else {
    $index = 1;
    echo '<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>';
    echo "<div class='slide'>
            <img src= ".$dir.$pic_array[$index]." />
            <div class='slide-caption'>
                <h3 class='slide-title'> $titles[$index] </h3>
                <p class='des'> $descriptions[$index] </p>
            </div>";
    echo "<form action='gallery.php' method='post'>
            <div class='previous'>
                <button value='Previous' name='action'>
                    <i class='fa fa-arrow-left fa-2x'></i>
                </button>
            </div>
            <div class='next'>
                <button value='Next' name='action'>
                    <i class='fa fa-arrow-right fa-2x'></i>
                </button>
            </div>
            </div>
            <br>
            <input type='hidden'  name='i' value= '$index'>
           </form>";
}

CSS

.slide {
    display:inline-block;
    position: relative;
    height: 300px;
    width: 500px;
}
.slide img {

    display:block;
    max-width:100%;
    height: 300px;
    width: 500px;
 }
.slide-title {
    margin:0 6rem 1rem;
}
.des {
    margin: 0 6rem 0;
}
.slide-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    color: white;
    background-color: rgba( 0, 0, 0, 0.5 );
    opacity:0;
}
.previous {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}
.next {
    position: absolute;
    bottom: 0;
    opacity: 0;
    right: 0;
    background-color: rgba( 0, 0, 0, 0.5);
}

Javascript

$（function（）{

$slide = $('.slide');
$caption = $slide.find('.slide-caption');
$next = $slide.find('.next');
$previous = $slide.find('.previous');

$slide.hover(function() {
        $caption.css('opacity', '1');
        $next.css('opacity', '1');
        $previous.css('opacity', '1');
    }, function() {
        $caption.css('opacity', '0');
        $next.css('opacity', '0');
        $previous.css('opacity', '0');
    }
);

}）;

http://i.imgur.com/4ONaGIL.png http://i.imgur.com/wMKESuo.png?1

Answer 1

你正在艰难地做事，但我理解为什么它起初看起来是正确的做法。

不要在PHP中回显所有HTML，而是在PHP中执行所需的操作，然后在HTML和javascript中完成其余操作。你似乎在使用Bootstrap，所以我们将使用Bootstrap轮播（又名滑块）。。

第一步是你要做的事情：在顶部，编写PHP代码来获取滑块的所有图像（只是paths/names.ext）并将它们放入PHP数组中，下面的代码将转换为JSON并以隐藏<input>字段内的字符串形式隐藏在页面上。然后javascript / jQuery将抓取该字符串，将其转换为javascript数组，并使用它来填充滑块。 像青蛙的头发一样光滑。

jsFiddle Demo

<?php
    $arrPics = your_php_fn_to_get_all_images_from_database_or_filesystem_as_an_array();
    //$arrPics = array('["http://loremflickr.com/500/98","http://loremflickr.com/500/100","http://loremflickr.com/498/100","http://loremflickr.com/498/98","http://loremflickr.com/499/99"]');
?>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>

    <input id="jsonPics" type="hidden" value="<?php echo json_encode($arrPics); ?>" />

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators"></ol>
        <div class="carousel-inner" role="listbox"></div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div><!-- #myCarousel -->

<强>的javascript / jQuery的：

$(function() {
    var arrPix = $('#jsonPics').val();
    var arrPix = $.parseJSON( arrPix );
    //alert( arrPix.length );
    $carItem = $('.carousel-inner');
    $carInd =  $('.carousel-indicators');
    $.each(arrPix, function(i, pic){
        $carInd.append('<li data-target="#myCarousel" data-slide-to="' +i+ '"></li>');
        $carItem.append('<div class="item"><img src="' +pic+ '" alt="Slider Image"></div>');
    });
    $('.carousel-indicators li:first-of-type').addClass('active');
    $('.carousel-inner .item:first-of-type').addClass('active');

});//END document.ready

注意：

上面的jsFiddle演示伪造了PHP部分（jsFiddle不能做PHP），并从填充了JSON＆＃34;数组＆＃34;的隐藏输入字段开始。您需要从PHP获得，根据顶部的代码。

该部分尚未经过测试/调试，因此留作练习。当然，如果您遇到问题，请在StackOverflow上发布一个新问题 - 但请先尝试自己解决。

使用后，下一个和上一个箭头不会显示

1 个答案: