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/}

       修改为

<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>

上一篇:DedeCMS列表AJAX按更新时间,点击,评论,星级排序

下一篇:DedeCMS短消息与发送到指定邮箱功能开发

相关文章

织梦打官司赢了还是输了

dedecms织梦网站停止使用了还侵权吗

被织梦起诉的案例

织梦中英文等多语言站点分页方法

织梦dede:arclist及dede:list调用tag标签(适用

添加微信
添加微信,免费咨询

15205695834

新手指南支付购买售后服务关于我们版权合规
合肥秀站网络科技有限公司
Copyright 2002-2022 麦站 版权所有
皖ICP备12018676号 网站地图