做網站,我們是認真的!

網站適配電腦+手機端,僅1280元,送2000M阿里云服務器,送com域名+免費備案
網站前端采用靜態系統顯示,后端動態管理,我們承諾網站包收錄,完成網站之后把源碼給客戶!

觀點

互聯網+時代,說建站,談運營與網絡營銷

織夢教程:織夢cms制作首頁banner后臺上傳!

時間:2020-12-16

織夢很多人都會,只是我用這么久,可能大家都知道,織夢做banner是做可怕的,現在就算你找模板建站,里面帶數據文件的,也很少把banner給你做好了的。網站做完了發現首頁banner不能滾動,怎么辦?到處找文章,什么用隱藏菜單做,通過織夢的默認輪播圖然后上傳圖片選擇幻燈片和滾動,雖然這個可以,但是有一個是什么,很多人都做不出來,今天老九教大家另外一種方法,這可能是有史以來很詳細很詳細的教程了!四川SEO SEO教程

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.發布幻燈片

織夢教程

今天的教程就到這里哦,希望能幫助大家更好的使用織夢。

    0
    首頁
    案例
    關于
    聯系
    凯时平台