代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS文章模型body全部圖片地址和alt信息JS

來源:本站原創 發布時間:2019-03-30 00:00:00熱度:我要評論(0

免費下載,無需注冊無需充值

       做二次開發要實現內容頁調用DedeCMS文章模型里的所有圖片和alt信息,可做成圖片瀏覽模式,下面是結合TouchSlide輪播圖教程,這個方法也適用于所有CMS。

涉及內容

①TouchSlide 最新版(請到官網下載)

②/templets/default/article_article.htm 文章內容頁模板

詳細步驟

       打開/templets/default/article_article.htm

1.CSS樣式和TouchSlide.js放在</head>前

<style type="text/css">
 .focus{width:320px;height:150px;margin:0 auto;position:relative;overflow:hidden;}
 .focus .hd{width:100%;height:5px;position:absolute;z-index:1;bottom:0;text-align:center;}
 .focus .hd ul{overflow:hidden;display:-moz-box; display:-webkit-box;display:box;height:5px;background-color:rgba(51,51,51,0.5);}
 .focus .hd ul li{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}
 .focus .hd ul .on{background:#FF4000;}
 .focus .bd{position:relative;z-index:0;}
 .focus .bd li img!important{width:100%;height:150px;}
 .focus .bd li a{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}
</style>
<script src="TouchSlide.1.1.js"></script>

2.獲取文章模型{dede:field.body/}的所有圖片地址和alt

      找到

{dede:field.body/}

       修改為

<p id="field_body">{dede:field.body/}</p>
<script type="text/javascript">
    var re =/<img.*?(?:>|\/>)/gi; //正則表達式匹配
    var s = document.getElementById("field_body").innerHTML;
    var a = s.match(re);
        for (var i=0;i<a.length ;i++ )
        { 
            //根據實際樣式添加標簽
            document.getElementById("pMsg").innerHTML +="<li>" a[i]+a[i].replace(re,"")+"</li>";
        }
</script>

3.輪播圖部分

       找到

  <!-- /content -->

        下面加入以下代碼

<p id="focus" class="focus">
<p class="hd">
 <ul></ul>
</p>
<p class="bd">
 <ul id="pMsg"></ul>
</p>
<script type="text/javascript">
 TouchSlide({
 slideCell:"#focus",
 titCell:".hd ul", //自動分頁
 mainCell:".bd ul",
 effect:"leftLoop",
 autoPlay:true,//自動播放
 autoPage:true //自動分頁
 });
</script>

轉載請注明來源網址:http://www.yxrxyy.live/dedecms_jq/1389.html

    發表評論

    評論列表(條)

      北京28是什么彩票