在产品预览滑块

时间:2016-01-19 08:34:21

标签: php jquery mysql

我想从我的表格中选择图像以显示在产品预览滑块上,如Demo

TABLE fm_product_image

| img_id | p_id_img | img_name          |
-----------------------------------------
|    1   |    60    | upload/demo_2.jpg |
|    2   |    60    | upload/demo_3.jpg |
<?php
include('connect.php');
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->

    <title>TEST</title>
</head>
<body>
    <ul class="cd-gallery">
        <li style="cursor: pointer;">
                <ul class="cd-item-wrapper">
                    <?php $result= mysql_query("SELECT img_name FROM fm_product_image WHERE p_id_img = 60") or die (mysql_error());
                    while ($rows = mysql_fetch_array ($result) ){ ?>
                    <li class="selected">
                        <img src="<?php echo $rows['img_name']; ?>" alt="Preview image">
                    </li>
                    <?php } ?>
                </ul> <!-- cd-item-wrapper -->
            <div class="cd-item-info">
                <b><a href="#0">TEST</a></b>
                <em class="cd-price">$26</em>
            </div> <!-- cd-item-info -->
        </li>
    </ul> <!-- cd-gallery -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

我的代码通过显示两个图像给出输出,我无法点击移动幻灯片。

1 个答案:

答案 0 :(得分:1)

将此代码放入滑块部分

 <?php $result= mysql_query("SELECT img_name FROM fm_product_image WHERE p_id_img = 60") or die (mysql_error());
$i=1;
                        while ($rows = mysql_fetch_array ($result) ){ ?>
                        <li <?php if($i==1){?>class="selected"<?php }?>>
                            <img src="<?php echo $rows['img_name']; ?>" alt="Preview image">
                        </li>
                        <?php $i++;} ?>
希望这会对你有帮助!