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

2021-02-27 18:02:43 阅读：154 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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