织梦列表页调用图片集并用swiper轮播展示

1，在织梦的 include/common.func.php  文件最后尾 添加 循环输出图集全部图片 的方法 Getimgs（） 如下：

//循环输出图集全部图片及注释
function Getimgs($aid, $imgwith, $imgheight, $num){
    global $dsql;
    $imgurls = '';
    $row = $dsql -> getone("Select * From`yf_addonimages` where aid='$aid'"); 
    $imgurls = $row['imgurls'];

    preg_match_all("/{dede:img (.*)}(.*){\/dede:img/isU", $imgurls, $wordcount);

    $textinfo = $wordcount[1];
    $count = count($wordcount[2]);
    if ($num > $count || $num == 0){$num = $count;}
    for($i = 0;$i < $num;$i++){
    $textinfoe = $textinfo[$i];
    $textinfoee = explode(" ",$textinfoe);

    $imglist .="<div class=\"swiper-slide\"><img src='".trim($wordcount[2][$i])."' width='".$imgwith."' height='".$imgheight."'></div>";
    
    }
    return $imglist;
}

2，在列表页 list_article.htm 模板上 用 [field:id function="Getimgs(@me,688,473,10)"/] 调用 如下:

 1       {dede:list pagesize ='18'}      
 2         <li class="">
 3               <a href="javascript:;" target="_self" style="text-align:center;">
 4                     <img src="[field:litpic/]">
 5                     <p>[field:title/]</p>
 6                 </a>
 7                 <div class="ht" style="display:none;">[field:id function="Getimgs(@me,688,473,10)"/]</div>
 8                 <div class="tit" style="display:none;">[field:title/]</div>
 9 
10         </li>
11 
12 
13     {/dede:list}

3，swiper的轮播插件 要动态获取 $('.ht') 所包含的图片资源做轮播图，直接用click事件来做就行，这里不细讲。这里要讲的是swiper动态获取的图片轮播 时 总会无法正常轮播或正常 展示，这是因为swiper的js函数通常是在页面加载时就加载并渲染环境，所以 会导致动态获取的图片无法正常渲染和轮播展示。解决办法是，在动态获取完图片的js或ajax后重新加载swiper的js函数，如下：

 1 $('.go_article li a').click(function  () {
 2           var imgs = $(this).next('.ht').html();
 3           var tit = $(this).next('.ht').next('.tit').html();
 4 
 5           $('.swiper-container1 .swiper-wrapper').html(imgs);//动态加载图片资源
 6 
 7           //swiper 图片资源改变后才加载swiper函数开始渲染--------
 8             var swiper = new Swiper('.swiper-container1', {
 9                       slidesPerView: 1,
10                       spaceBetween: 30,
11                       loop: true,
12                       pagination: {
13                         el: '.swiper-pagination',
14                         clickable: true,
15                       },
16                       navigation: {
17                         nextEl: '.swiper-button-next',
18                         prevEl: '.swiper-button-prev',
19                       },
20                     });
21             //--------------------------------------------------------------------------------
22 
23           $('#htgg').show();
24           $('#hbgg').css("height","473");
25 
26 })

END

标签：count,轮播,织梦,图片集,num,加载,swiper,图片
来源： https://www.cnblogs.com/pensive/p/14456541.html