0

我已经接管了一个网站，该网站目前有一个我们想要保留的定制 CMS。我们想要做的一个改变是主页动画横幅，因为它很差。

它目前已设置好，因此它会抓取通过 cms 输入的图像并将它们输出到动画横幅中。我想保留该功能，但将图像输入到 nivo 滑块中。我对如何去做这件事有点谨慎。

这是将图像输出到动画横幅的代码（我认为！！）：

<? if ($page[id] == 1) { ?>
<?
    $i = 0;
    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC");
    while ($banner = mysql_fetch_assoc($homebanners)) {
        if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; }

        $javascript .= "bannerimage[$i] = '$banner[banner_image]';
        bannertext[$i] = '".addslashes($banner[banner_text])."';
        bannerlink[$i] = '$banner[banner_link]';
        ";
        $i++;
    }

if ($i > 1) {
?>
<script>

    var curbanner = 0;

    var bannerimage = new Array();
    var bannertext = new Array();
    var bannerlink = new Array();

    <? echo $javascript; ?>

    totalbanners = bannerimage.length;

    function changebanner() {
        curbanner = curbanner + 1;
        if (totalbanners == curbanner) { curbanner = 0; }

        bannerurl = 'banner_images/'+bannerimage[curbanner];

          $('#bannertext').fadeOut('100', function() {
            $("#banner").animate({"height": "0px"}, 350, "linear", 
            function() { 
                $('#banner').css({ 'background-image': 'url('+bannerurl+')' }).fadeIn('slow');
                $("#banner").animate({"height": "222px"}, 350, "linear", 
                function() {
                    document.getElementById('btext').innerHTML=bannertext[curbanner];
                    document.getElementById('bannerlink').href=bannerlink[curbanner];
                    if (bannerlink[curbanner] == "") { document.getElementById('bannerlink').innerHTML = ''; } else {  document.getElementById('bannerlink').innerHTML = 'Read more...'; }
                    $('#bannertext').fadeIn('100');
                });
            });
          });
    }

    setInterval('changebanner()',10000);
</script><? } ?>

和...

<div id="rightcol" style="height:222px;">
    <div id="banner" style="background-image:url('banner_images/<? echo $bannerimage; ?>')">
        <div id="bannertext">
            <h2 id="btext"><? echo $bannertext; ?></h2>
            <a id="bannerlink" href="<? echo $bannerlink; ?>" class="readmore"><? if ($bannerlink) { ?>Read more...<? } ?></a>
        </div><!-- END bannertext -->
    </div><!-- END banner -->
</div><!-- END rightcol -->

如何以这种格式将图像、横幅文本和横幅链接放入 nivo 滑块：

<div id="slider" class="nivoSlider">
    <a href="page-link-1"><img src="image-1.jpg" alt="" title="banner-text-1" /></a>
    <a href="page-link-2"><img src="image-2.jpg" alt="" title="banner-text-2" /></a>
    <a href="page-link-3"><img src="image-3.jpg" alt="" title="banner-text-3" /></a>
</div>

通过 cms 输入的幻灯片数量应该是无限的。

4

1 回答 1

1 
<?php
if ($page[id] == 1) {

    $i = 0;
    $html = '';

    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC");
    while ($banner = mysql_fetch_assoc($homebanners)) {
        if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; }

        $html .= "<a href=\"$bannerlink\"><img src=\"$bannerimage\" alt=\"$bannertext\" title=\"$bannertext\" /></a>";
        $i++;
    }

    if ($i > 1) {
        echo "<div id=\"slider\" class=\"nivoSlider\">";
        echo $html;
        echo "</div>";
    }
}
?>
于 2011-09-08T11:23:39.317 回答