dedecms实现列表页缩略图随机调用的方法
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>用过DEDECMS的朋友应该都知道，有些模板列表页面需要用到缩略图，调用内容中的缩略图可以使用系统自带的脚本调用第一张<u>图片</u>。但是，并不是我们所有的内容里都有图片，有时候第一张图片也不一定是适合尺寸的标准缩略图大小，总之用户体验不好，尤其是编辑人员忘记或者不会上传缩略图的话那势必会影响网站。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
缩略图随机调用方式的步骤如下：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
1.原先我们模板中调用缩略图的脚本是这样的：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div class="msgheader" style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div class="right">
<span><u>复制代码</u></span>
</div>
代码如下:</div>
<div class="msgborder" id="phpcode3" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
@me = (empty(@me['litpic']) ? "" : "<a href='{@me['arcurl']}' class='preview'><img src='{@me['litpic']}'/></a>"); </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
2.需要替换成我准备好的：</p>
<blockquote>
<ol class="dp-c">
<li class="alt">
<span><span><a href=</span><span class="string">""</span><span> title=</span><span class="string">""</span><span> target=</span><span class="string">"_blank"</span><span>></a> </span></span>
</li>
</ol>
</blockquote>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
3.上传下面的JS文件和准备好的图片到主机中。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div class="msgheader" style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div class="right">
<span><u>复制代码</u></span>
</div>
代码如下:</div>
<div class="msgborder" id="phpcode5" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
var m=20; <br>
var n=Math.floor(Math.random()*m+1) <br>
document.write ("<img src='/images/nt"+n+".jpg' border=0 width=148 height=118 />");</div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
需要注意一个问题，我们最好准备20-30张固定缩略图尺寸的图片，因为固定尺寸版面比较好看，不会压缩变形。如果你列表10个内容，如果只有10个图片随机会导致图片有几个会重复，体验不是太好，如果图片多一些可以使得重复的几率小一些。就这样，如果有需要就参考使用吧。</p>
頁:
[1]