2

我已经在我们的站点中实现了 bxslider，其中滑块一直以动态方式出现，例如在 while 循环中。这里有while循环中的动态代码，如：

$html_img = '<div class="sch_rel_img">';
if(count($node_img)>1)       
{
    $html_img .='<link href="'.base_path().drupal_get_path('module','demonz').'/css/jquery.bxslider.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8"/>';    
    $html_img .='<script src="'.base_path().'sites/default/themes/demonz/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>';

    $html_img .='<script src="'.base_path().drupal_get_path('module','pubclub').'/js/jquery.searchres_bxslider.min.js" type="text/javascript" charset="utf-8"></script>';

    $html_img .='<script type="text/javascript" src="'.base_path().drupal_get_path('module','pubclub').'/js/search_carousel.js" charset="utf-8"></script>';

    //$html_img .="<input type='hidden' name='nid' id='nid' value='".$nid."' />";
    //$car = 1;
    //$html_img .='<div class="schnext" id="schnext_'.$nid.'"></div><ul class="carousel_'.$nid.'">';    
    $html_img .='<div class="schnext" id="schnext"></div><ul class="carousel" id="carousel_'.$nid.'">';
    foreach($node_img as $img)
    {
        $image = $img['filepath'];        
        $html_img .="<li>";
        $html_img .="<img src='".$image."' width='98%' height='96%' />";
        $html_img .="</li>";    

    }
    /*$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/big-event.jpg' width='98%' height='96%' /></li>";
    $html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/innquizitive_thursday_screen_ad.jpg' width='98%' height='96%' /></li>";*/
    //$html_img .='</ul><div class="schprev" id="schprev_'.$nid.'"></div>';
    $html_img .='</ul><div class="schprev" id="schprev"></div>';
}
$html_img .='</div>';

我的 bxslider 脚本是

<script type="text/javascript">
    var slider = $(".carousel").bxSlider({
        mode:'horizontal', 
        auto:false,
        pager:false,
        moveSlides:1,
        nextSelector: '#schnext',
        prevSelector: '#schprev'
        /*nextText: 'Onward →',
        prevText: '← Go back'*/
    });
</script>

如何实现这个东西在一页中获得多个轮播。我不明白如何以动态方式构建 bxslider 的 js 文件以及上面的 php 脚本代码。

我尝试了这个东西，$('.carousel').each(function() { slidercode });但没有得到想要的结果。

如果有人知道这种类型的解决方案，请帮助我。

谢谢

4

1 回答 1

4

由于您有多个具有唯一 carousel_* ID 的 DIV，因此只需将它们用于选择器。

$('#carousel_1').bxslider({ ... });
$('#carousel_2').bxslider({ ... });
...

或者，如果他们都有相同的选择：

$('.carousel').each(function(index,item) {
    $(item).bxslider({ ... });
});

bxslider的文档中还解释了多个幻灯片。

于 2013-07-19T14:15:18.037 回答