1

我从这里使用无限轮播插件的 3.02 版

帮助我根据数据库中的数据整理一些笔记。我的问题是轮播左右箭头没有出现，我不认为轮播效果正在发生。这是我组装数据的方式：

<ul class="carousel">
<?php
while ($rows = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $url = htmlspecialchars($rows['stationery']);
        $message = htmlspecialchars($rows['message']);
        echo "<li id=\"load_message\" style=\"background: url($url) no-repeat;\">";
        echo "<div id=\"message\">" . nl2br($message) . "</div>";
        echo "</li>";
    }

我看到背景图像与文本叠加得很好，但有两个问题：第一个是第一个图像显示的比第二个图像低约 30 像素。第二个问题是我不认为轮播插件正在加载并且我没有看到左右箭头。我查看了 Firebug 的 NET 选项卡，它显示正在加载 right.png 和 left.png。在 jquery 之后，我将插件加载到我的文档的头部：

<script type="text/javascript" src="js/jquery.infinitecarousel3.min.js"></script>

这就是我唤起它的方式：

$(document).ready(function() {
    $('.carousel').infiniteCarousel({
        imagePath: 'images/examples/',
        transitionSpeed: 300,
        displayTime: 6000,
        internalThumbnails: false,
        thumbnailType: 'buttons',
        progressRingColorOpacity: '0,0,0,.9',
        progressRingBackgroundOn: false,
        margin: 10,
        easeLeft: 'linear',
        easeRight: 'linear',
        inView: 2,
        advance: 1,
        autoPilot: false,
        prevNextInternal: false,
        autoHideCaptions: false
    });
});

最后是CSS：

.carousel ul {
    height: 300px;
    width: 710px;
}

li#load_message {
    display: inline-block;
    margin-left: 30px;
    height: 390px;
    width: 290px;
    position:relative;
}


#load_data {
    width: 710px;
    height: 460px;
}


#message {
    margin: 40px 10px 10px 30px;
    z-index:99;
    position:absolute;
    top: 30px;
    left: 100px;
}
4

0 回答 0