Dedecms 模板中心

您现在的位置: 首页 > 教程文档 > 织梦技巧 >

制作如何在织梦后台上传首页banner(广告图)

来源:未知 发布时间:2016-09-09热度:
目前的很多 织梦模板 都是直接在ftp里面替换首页广告图 这对应客户是很不友好的 因为他们根本不懂什么叫代码 所以我们必须找到可以从后台上传织梦广告图的方法。 1.添加内容模型管理 我这里选择频道模型叫轮播图 然后添加字段: 文字:链接地址 字段名称:pi...

 
目前的很多织梦模板 都是直接在ftp里面替换首页广告图 这对应客户是很不友好的 因为他们根本不懂什么叫代码 所以我们必须找到可以从后台上传织梦广告图的方法。

1.添加内容模型管理

织梦教程

织梦教程

织梦教程

我这里选择频道模型叫轮播图

然后添加字段:

文字:链接地址

字段名称:piclinks

织梦教程

 

织梦教程

弄完就就会发现内容管理栏目里面多了一个叫轮播图的

2.页面代码调用

打开左侧列表模板》默认模板管理》找到index.htm,在你需要放banner的地方加入调用代码:

{dede:arclist  addfields='piclinks'  row='5'  channelid='17'}
<li  ><a href="[field:piclinks/]"target="_blank"><img src="[field:litpic/]"</li>
{/dede:arclist}

此处注意:channelid=‘17’这个17是之前我们建立的轮播图频道ID哦,row='5'的意思是幻灯片的个数等于5

假如你还不会,接下来我给大家看完整的代码:

<script  type="text/javascript">
$(function(){
$("#J_bslist").bannerSlider({
width:"100%",//宽 (如果100%的时候请传入字符串)
height:463,//高
auto:true,//是否能自动滚
effect:"fade",//效果
Pause:3000,//停顿时间-两个动画滚动间隔的时间
animTime:250,//一张图滚动的时间
zIndex:10,//设置层级相互遮盖
parentClass:"cs-bannerWrap1",
pagination:{
show:false,
className:"banner-numlist"
},
btn:{
show:true,
dynamic:false//是否有鼠标移动上去显示箭头的效果
},
describe:{
show:false,
left:"80%",
bottom:0
}
})

})
</script>

<div  class="cs-bannerWrap1"  style="width: 100%; height: 463px;overflow:hidden; margin: 0px auto;">

<ul  id="J_bslist"  class="bs_list"  style="width: 100%; height: 463px; position: relative;">
{dede:arclist  addfields='piclinks'  row='5'  channelid='17'}
<li  style="position: absolute; opacity: 1; z-index: 10; background-position: 50% 0%; background-repeat: no-repeat no-repeat;"  data-title=""><a href="[field:piclinks/]"target="_blank"><img src="[field:litpic/]"</li>
{/dede:arclist}

 

上面是JS代码,也就是你自己写的,让这个div里面的内容滚动,这个也很重要,很多人会觉得,怎么做完了,没反应啊,很有可能就是JS代码没放!

3.添加顶级菜单“幻灯片”

织梦教程

3.发布幻灯片

织梦教程


    责任编辑:好织梦