DedeCMS文章模型body全部圖片地址和alt信息JS[織夢(mèng)網(wǎng)站模板使用教程]做二次開發(fā)要實(shí)現(xiàn)內(nèi)容頁(yè)調(diào)用DedeCMS文章模型里的所有圖片和alt信息，可做成圖片瀏覽模式，下面是結(jié)合TouchSlide輪播圖教程，這個(gè)方法也適用于所有CMS。

涉及內(nèi)容

①TouchSlide 最新版（請(qǐng)到官網(wǎng)下載）

②/templets/default/article_article.htm 文章內(nèi)容頁(yè)模板

詳細(xì)步驟

       打開/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; //正則表達(dá)式匹配
    var s = document.getElementById("field_body").innerHTML;
    var a = s.match(re);
        for (var i=0;i<a.length ;i++ )
        { 
            //根據(jù)實(shí)際樣式添加標(biāo)簽
            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", //自動(dòng)分頁(yè)
 mainCell:".bd ul",
 effect:"leftLoop",
 autoPlay:true,//自動(dòng)播放
 autoPage:true //自動(dòng)分頁(yè)
 });
</script>