本人做的是网站的二次开发之后的修改网站，基本上修改了百分之60-70.所以有一些心得分享给大家
1.网站首页轮播图片
我是做成这个效果的
具体代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>首页</title>
<meta http-equiv="x-ua-compatible-Type" content="IE=9"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="${resSys}/yzw/css/style.css" type="text/css" media="screen" rel="stylesheet" />
<script src="${resSys}/yzw/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#index').click(function(){
alert('当前页面不支持该功能')
});
$('#collect').click(function(){
alert('当前页面不支持该功能')
});
});
</script>
<style>
* { word-wrap: break-word; }
body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; }
body, ul, li { margin: 0; padding: 0; }
ul li { list-style: none; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: none; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }
.frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; }
.title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; }
.block { margin: 10px 10px 0; }
.temp { margin: 1px; }
.slideshow { clear: both; }
.slideshow li { position: relative; overflow: hidden; }
.slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 20px; font-size: 14px; text-indent: 10px; }
.slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; }
.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
.slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; }
ul, li { list-style: none; }
a:hover { text-decoration: underline; color: #a50001; }
.frame { background: none; border: 0px solid #fff; margin-bottom: 0px; }
.temp { margin: 0; }
.slidebar { position: absolute; top: 0; left: 0; }
.slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3);margin-left:1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; }
.slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: red; font-weight: 700; }
.slideshow SPAN.title { text-indent: 0px; }
.block { margin: 0;position: relative; }
#frameHlicAe { margin: 0px !important; border: 0px !important; }
.comiis_wrap350, .comiis_wrapad { margin: 0 auto; width: 350px; }
.comiis_wrapad { margin-top: 10px; }
.comiis_wrapad { overflow: hidden; }
.comiis_wrapad img { float: left; margin-top: 0px; }
#slidesImgs li { width: 350px; height: 250px; display: none; }
</style>
</head>
<body>
<div class="header">
<a class=""><img src="/r/cms/www/default/images/logo.png" alt="" class=""></a>
<div class="right">
<span id="index"><a href="#">设为首页</a></span>
<span class="">|</span>
<span id="collect"><a href="#">加入收藏</a></span>
</div>
</div>
<div class="content">
[#include "../include/biaoti.html"]
<div class="medium">
<div class="banner">
<div id="slideBox" class="slideBox">
<div class="bd">
<div class="comiis_wrapad" id="slideContainer">
<div id="frameHlicAe" class="frame cl">
<div class="temp"></div>
<div class="block">
<div class="cl">
<ul class="slideshow" id="slidesImgs">
[@cms_content_list recommend='2' typeId='1,2,3' count='5' orderBy='4' channelId='122' channelOption='1' dateFormat='MM-dd' ]
[#list tag_list as a]
<li><a href="${a.url}" ><img src="${a.typeImg}" /></a><span class="title">${a.title}</span></li>
[/#list]
[/@cms_content_list]
</ul>
</div>
<div class="slidebar" id="slideBar">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
SlideShow(4000);
function SlideShow(c) {
var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m;
function b() {
m = setInterval(function () {
e = e + 1 >= d ? e + 1 - d : e + 1;
g()
}, c)
}
function k() {
clearInterval(m)
}
function g() {
f[lastI].style.display = "none";
n[lastI].className = "";
f[e].style.display = "block";
n[e].className = "on";
lastI = e
}
f[e].style.display = "block";
a.onmouseover = k;
a.onmouseout = b;
h.onmouseover = function (i) {
j = i ? i.target : window.event.srcElement;
if (j.nodeName === "LI") {
e = parseInt(j.innerHTML, 10) - 1;
g()
}
};
b()
}
;
</script>
</div>
<script type="text/javascript" src="${resSys}/yzw/js/jquery1.42.min.js"></script>
<script type="text/javascript" src="${resSys}/yzw/js/jquery.SuperSlide.2.1.1.js"></script>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] });
</script>
</div>
</div>
我是从头开始截的，有需要的可以自己去粘自己需要部分。
做这个功能需要注意的是：
1.先写上样式，比如你要做多大的或者多少张图片轮播
2.先把这部分写死，然后再套标签 具体标签为（内容列表标签）
3.再标签里写上${a.url}和${a.title}，这样才能从前台读取到后台上传的图片
4.再后台编辑的标签名字就是在前台图片下（我做的显示标题的一条透明层。透明度为0.8）显示图片标题
5.点击图片后跳到另一个页面，显示的是在后台编辑上传的图片和内容
栏目与模板：
1.我建议每个子栏目都对应一个模板，这样改起来比较方便
2.如想要删除子栏目，需要在内容回收站里先删除（内容回收站在维护里）
3.每个栏目（包括子栏目）的ID很重要，修改模板之前一定要记住ID，不要记错了
4.添加模板，一般我添加模板相同的栏目，文件名基本上前面都一样，只不过后面加个1.2.3.这些数字来区分，这样看起来比较清晰
5.如果要更换首页最上方的图片， 我建议是在这个路径添加 资源---（/r/cms/www/default/images）
6.我使用的是v8.1的版本，在上传首页轮播图片是遇到一个问题，是有时候在图片上传不了，后来才发现，原来是图片太大了，
那张图片是700多K，后来我找美工用ps修改了大小，300多K，就可以正常上传了，我不知道是服务器设置的问题还是什么，
总之问题解决了，注意判断一张图片有没有上传是看（选择图片，然后上传）可以上传的图片就会在右侧的图片框显示出来，
没有显示的话就一定没有上传成功。需要处理一下图片大小就可以上传了。
总之：在做二次开发之前一定要在官网上看标签使用与模板制作，这个是最重要的，然后再看一些教学视频，一定要熟悉之后再进行
二次开发，不要像我一样，走了很多弯路，谢谢大家。
|
|
