Question

我有这个代码，我想问一下如何使用按钮（左，右）来滑动我从数据库导入的小图像，如幻灯片使用jquery ??谢谢你的帮助

网站示例：http://www.voirfilms.co

$PARAM_hote='localhost';
$PARAM_nom_bd='venteformation';
$PARAM_utilisateur='root';
$PARAM_mot_passe='';

try{
    $connexion = new PDO('mysql:host='.$PARAM_hote.';dbname='.$PARAM_nom_bd, $PARAM_utilisateur, $PARAM_mot_passe);
}
catch(Exception $e) {
    echo 'Erreur : '.$e->getMessage().'<br />'; echo 'N° : '.$e->getCode();
}
if (mysqli_connect_errno()) {
echo "Echec de la connexion" ;
exit();
}
else 
{
    $RequetLivre = $connexion->query("select * from livre");
?>
<div id="wrapper" class="col-lg-12">
    <div id="page-wrapper" >
        <div class="container-fluid">
        <?php /**Block ROW 1 *****/?>
        <div class="row">

                <div class="col-lg-12">
                    <form name="f_livre" method="POST" action="verification.php">
                        <fieldset>
                            <table width="" border="0">
                                <tr>
                                <?php 
                                while ($LivreRow = $RequetLivre->fetch(PDO::FETCH_ASSOC)) 
                                {   
                                    echo "<div class='slideshow'>";
                                    echo"<td>";
                                    echo '<button type="submit" name="idl" value="'.$LivreRow['IDL'].'"><img src="data:image/jpeg;base64,'.base64_encode( $LivreRow['IL'] ).'" width="240" height="300" id="'.$LivreRow['IDL'].'" /></button>';
                                    echo"</td></div>";

                                }
                                </tr>

                            </table>
                        </fieldset>
                    </form>
                </div>
            </div><!-- /#ROW 1 -->

        </div>
    </div><!-- /#page-wrapper -->

Answer 1

我有这个代码可以工作，动态滑块采用动态图像并插入滑块。

<div class="item <?php if($i==1) echo "active"; ?>"> //specifies image active

以上代码指定第一张图片必须处于活动状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dynamic Slider</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://use.fontawesome.com/0f773d63b5.js"></script>

    <style>
    /*SLIDER CSS*/
     /* Main carousel style */
    .carousel {
        width: 100%;

    }

    /* Indicators list style */
    .article-slide .carousel-indicators {
        bottom: 0;
        left: 0;
        margin-left: 5px;
        width: 100%;
    }
    /* Indicators list style */
    .article-slide .carousel-indicators li {
        border: medium none;
        border-radius: 0;
        float: left;
        height: 54px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 5px !important;
        margin-top: 0;
        width: 100px; /*here will be the size of */
    }
    /* Indicators images style */
    .article-slide .carousel-indicators img {
        border: 2px solid #FFFFFF;
        float: left;
        height: 54px;
        left: 0;
        width: 100px;
    }
    /* Indicators active image style */
    .article-slide .carousel-indicators .active img {
        border: 2px solid #428BCA;
        opacity: 0.7;
    }
    </style>


    <script type="text/javascript">
        // SLIDER JQUERY
        $('.carousel').carousel({
          interval: false
        });
    </script>

</head>
<body>
    <!--SECTION ABOUT PLACE-->
    <section class="container-fluid">
        <div class="carousel slide article-slide carousel_size " id="article-photo-carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <?php
                //ESATBLISH CONNECTION
                $host = "localhost";
                $username_db = "USERNAME";
                $password_db = "PASSWORD";
                $databaseName = "DATABASE";

                 $link = new mysqli ($host, $username_db, $password_db, $databaseName); 

                //check connection
                if($link->connect_error){
                    die ("connection failed : ".$link->connect_error);
                }

                //DISPLAY IMAGESIN SIDE SLIDER
                $id = $_GET['profileId'];

                $img_sql = "SELECT * FROM gallery WHERE profileId='$id' LIMIT 5";
                $img_res =$link->query($img_sql);

                if($img_res){
                $i=0;
                    while($row=$img_res->fetch_assoc()){
                    $i++;
                    ?>
                        <div class="item <?php if($i==1) echo "active"; ?>">
                        <img alt="" title="" src="admin/uploads/<?php echo $row['image'];?>">
                        </div>
                    <?php
                    }
                }
                ?>

            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#article-photo-carousel" 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="#article-photo-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>  
    </section>      

</body>
</html>

我怎么能做一个图像幻灯片

1 个答案: