替换织梦DedeCMS首页轮播图Flash组件为图片

  织梦DedeCMS系统的首页有一个轮播图功能,可以在后台将需要的内容设置为首页轮播。但是织梦自带的这个功能是以Flash组件的形式来展现的,而现在的主流浏览器Chrome等已经明确表示将不再支持Flash,更不用说从来就不支持Flash的苹果iPhone等产品。我们可以通过修改让织梦以图片的方式来展现轮播图。

  首先打开织梦首页模板,默认为:/templets/default/index.htm,找到如下代码:

<div class="flashnews">
    <!-- size: 280px * 192px -->
    <script language='javascript'>
 linkarr = new Array();
 picarr = new Array();
 textarr = new Array();
 var swf_width=280;
 var swf_height=192;
 //文字颜色|文字位置|文字背景颜色|文字背景透明度|按键文字颜色|按键默认颜色|按键当前颜色|自动播放时间|图片过渡效果|是否显示按钮|打开方式
 var configtg='0xffffff|0|0x3FA61F|5|0xffffff|0xC5DDBC|0x000033|2|3|1|_blank';
 var files = "";
 var links = "";
 var texts = "";
 //这里设置调用标记
 {dede:arclist flag='f' row='5'}
 linkarr[[field:global.autoindex/]] = "[field:arcurl/]";
 picarr[[field:global.autoindex/]]  = "[field:litpic/]";
 textarr[[field:global.autoindex/]] = "[field:title function='html2text(@me)'/]";
 {/dede:arclist}
 for(i=1;i<picarr.length;i++){
 if(files=="") files = picarr[i];
 else files += "|"+picarr[i];
 }
 for(i=1;i<linkarr.length;i++){
 if(links=="") links = linkarr[i];
 else links += "|"+linkarr[i];
 }
 for(i=1;i<textarr.length;i++){
 if(texts=="") texts = textarr[i];
 else texts += "|"+textarr[i];
 }
 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
 document.write('<param name="movie" value="{dede:global.cfg_templeturl /}/default/images/bcastr3.swf"><param name="quality" value="high">');
 document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config='+configtg+'">');
 document.write('<embed src="{dede:global.cfg_templeturl /}/default/images/bcastr3.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config='+configtg+'&menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
 </script>
   </div>
   <!-- /flashnews -->

  将这一段代码替换为:

<!-- 轮播start -->
<div id="sbox">
    <div id="simg">
        <div class="prev1" id="prev1"></div>
        <div class="next1" id="next1"></div>
        <ul>
        {dede:arclist titlelen='66' flag='f' row='5'}
        <li><a href="[field:arcurl/]" target="_blank"><img src="[field:litpic/]" /><em></em>
            <h2>[field:title/]</h2>
            </a></li>
        {/dede:arclist}
        </ul>
    </div>
</div>
<!-- 轮播end --> 

  对应的CSS代码为:

/*图片轮播*/

#sbox { width: 370px; height: 300px; overflow: hidden; position: relative; zoom: 1; }
#simg { width: 370px; height: 300px; overflow: hidden; }
#simg ul { overflow: hidden; zoom: 1; position: absolute; top: 0px; left: 0px; width: 9999px; }
#simg ul li { overflow: hidden; zoom: 1; float: left; display: inline; width: 370px; height: 300px; }
#simg ul li h2 { z-index: 3; position: absolute; font-size: 16px; width: 370px; color: #fff; top: 255px; font-weight: bold; text-align: center; height: 35px; line-height: 35px; overflow: hidden; }
#simg ul li img { width: 370px; height: 300px; }
#simg ul li em { width: 370px; height: 200px; background: url(../images/scroll_bg.png) 0px 0px; position: absolute; top: 260px; z-index: 1; display: block; }
#simg_s { width: 273px; position: absolute; bottom: 9px; left: 51px; height: 71px; overflow: hidden; zoom: 1; z-index: 2; }
#simg_s ul { overflow: hidden; zoom: 1; width: 999px; position: absolute; top: 0px; left: 0px; }
#simg_s ul li { float: left; display: inline; width: 54px; height: 67px; overflow: hidden; zoom: 1; margin-right: 12px; border: 2px solid #333; }
#simg_s ul li.on { border: 2px solid #ff9500; }
#simg_s ul li img { width: 54px; height: 67px; }
.prev1 { position: absolute; top: 133px; left: 0px; width: 47px; height: 80px; z-index: 9; cursor: pointer; background: url(../images/yx_index.png) -3px -2px no-repeat; opacity: .3; }
.next1 { position: absolute; top: 133px; right: 0px; width: 45px; height: 78px; z-index: 9; cursor: pointer; background: url(../images/yx_index.png) -52px -4px no-repeat; opacity: .3; }
.prev1:hover, .next1:hover { opacity: .6; }

本站原创内容,转载请注明来源:https://www.liutonghui.com/159

自己动手换iPhone电池
上一篇 2018-05-19
Layui + jQuery无刷新增删改查功能
下一篇 2018-09-14

评论列表(2条)

发表评论

captcha

相关推荐

  • 织梦DedeCMS解决一个栏目多个分页问题

      大家会发现,在使用织梦CMS的时候,一个列表页做多个分页,非常麻烦。 常用分页使用方法是list和pagelist标签配合使用,但是只能有指定一个栏目进行分页。如果使用arclist和pagelist可以指定多个栏目,但是分页是出不来的。   今天有一个办法可以解决这个问题。在你所需要进行多个分页的模板中在头部插入以下代码: &lt;script language="javascript" type="text/javascript......

    2014-10-28
    24020
  • PHP利用正则表达式提取内容中图片的函数

      用PHP开发产品中经常需要从某部分内容中提取出图片,比如在一个表单中,我们需要从内容中提取出图片的路径当作缩略图,这时就可以用正则表达式的规则匹配的方法来提取出图片路径,利用下面这个函数来完成。 &lt;?php function getImgs($content,$order='ALL'){ $pattern="//"; preg_match_all($pattern,$content,$match); ......

    2015-01-07
    23810
  • Dedecms文章内容页和图片集内容页调用缩略图的方法

      织梦DedeCMS的缩略图一般显示在列表页,但有时我们需要在文章内容页缩略图的调用,图片集内容页缩略图的调用,使用方法如下:   文章内容页和图片集内容页,缩略图的调用。适合内页中调用。 &lt;img src="{dede:field.picname runphp='var_dmp(@me)' /}"/&gt;   文章频道页、列表页调用缩略图: {dede:list pagesize='20'} [field:array ru......

    2015-04-29
    28090
  • PHP文字水印,缩略图,图片水印实现类与用法示例

      本文实例讲述了PHP开发的文字水印,缩略图,图片水印实现类与用法。分享给大家供大家参考,具体如下:   1.实现类ImageToTest.class.php参考代码 class ImageToTest { /** * 图片的基本信息 */ private $info; private $image; public function __construct($src){ $info = getima......

    2020-08-22
    19930
  • PHP生成任意尺寸并居中裁剪缩略图的函数

      在项目中经常需要对图片进行各种处理,比如生成缩略图,并且生成的缩略图还要保持原有图片的宽高比例不变形,下面就分享一个非常好用的PHP生成缩略图函数,可以手动输入自定义尺寸并居中裁剪保持图片比例不变形,代码如下: &lt;?php // 应用公共文件 /** * 居中裁剪图片 * @param string $source [原图路径] * @param int $width [设置宽度] * @param int $heig......

    2020-10-03
    19922
  • 使用 jQuery 高亮显示当前栏目导航链接

      高亮显示当前栏目导航链接的原理是:先获取当前页面的 URL 或标识当前页面的导航链接,在文档加载时,使用 jQuery 添加一个特定的类或样式来高亮当前栏目导航链接。   以下是一个基本的示例,展示如何使用 jQuery 高亮显示当前栏目导航链接。在这个例子中,假设导航链接的 href 属性与当前页面的 URL 匹配。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;......

    2021-02-03
    17890
  • 织梦DedeCMS收费5800元,大批建站公司将受影响

      9月26日,国内知名开源建站程序织梦内容管理系统(DedeCMS)官宣新规:除个人非盈利用途外,所有商业使用均需购买商业授权,正式开启强制收费模式,引发建站行业广泛热议。   作为国内最早也是使用率最高的CMS之一,DedeCMS凭借简单易用,功能全面,模板插件丰富等优势,成为无数站长的入门首选,占据大量市场份额。不少个人站长依托其赚取行业第一桶金,众多建站公司也长期借助该程序承接企业建站业务。   但长期的免费使用,导致大多数商业......

    2021-09-27
    22334
  • TinyMCE编辑器配置正确但是不显示的解决方法

      最近在给本站的后台功能做一次整体调整,在将 TinyMCE 富文本编辑器引入到页面表单时却不显示编辑器主体,反复检查确认了代码配置没有任何问题。在经过一番研究发现,由于表单页面是通过 iframe 引入到主体框架中的,这些表单页面并没有 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; 等 HTML 元素,而 TinyMCE 没有获取到这些元素就认为这不是一个 HTML 页面,因此无法加......

    2023-04-16
    11140