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

       做二次开发要实现内容页调用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/}

       修改为

<div id="field_body">{dede:field.body/}</div>
<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("divMsg").innerHTML +="<li>" a[i]+a[i].replace(re,"")+"</li>";
        }
</script>

3.轮播图部分

       找到

  <!-- /content -->

        下面加入以下代码

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

扩展阅读