[TOC] ## 知識點： 1、首頁幻燈片 2、首頁導航標簽 3、首頁數據 ## 一、首頁幻燈片 ### （一）思路分析 1、查看源代碼 2、檢查元素 ### （二）后臺處理 ``` public function index() { // 幻燈片 $slide_list = $this->db->table('slide')->where(array('type'=>0))->lists(); $this->assign('data',$slide_list); return $this->fetch(); } ``` ### （三）模板渲染 ``` <div id="piclist" class="qy-focus-index-list"> <ul class="focus-index-list"> {volist name="data" id="ivo"} <li class="focus-index-item" rseat="fcs_0_p<?php echo $i;?>" style=" opacity: 1;<?php if($i>1){echo 'display: none;';}?>"> <a target="_blank" href="{$ivo.url}" class="focus-index-itemLink"><img src="{$ivo.img}"></a> </li> {/volist} </ul> </div> <div class="qy-focus-side-panel"> <div class="focus-side-inner"> <ul id="txtlist" class="focus-side-list"> {volist name="data" id="vo"} <li class="focus-side-item<?php if($i==1){echo ' selected';}?>"> <a title="{$vo.title}" rseat="{$i}" class="focus-side-itemLink">{$vo.title}</a> </li> {/volist} </ul> </div> </div> ``` ### （四）自動切換 ``` <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $('.focus-side-itemLink').on('mouseover',function(){ $(this).parent('li').addClass('selected').siblings('li').removeClass('selected'); var i = $(this).attr('rseat'); $('.focus-index-list li[rseat="fcs_0_p'+i+'"]').show().siblings('li').hide(); }); </script> ``` ## 二、首頁導航標簽 ### （一）后臺處理 ``` public function index(){ // 導航標簽 $channel_list = $this->db->table('video_label')->where(array('flag'=>'channel'))->order('ord asc')->pages(8); $this->assign('channel_list',$channel_list['lists']); return $this->fetch(); } ``` ### （二）模板渲染 ``` <div id="nav_sec_K1" class="nav-item nav-item-0"> {volist name="channel_list" id="cvo"} {if condition="$i%2 eq 1"} <div class="nav-list"> <div class="nav-list-item"><a target="_blank" rseat="712211_channel_yule" href="/index.php/index/index/cate?label_channel={$cvo.id}" class="nav-list-link">{$cvo.title}</a> </div> <div class="nav-list-item"><a target="_blank" rseat="712211_channel_zixun" href="/index.php/index/index/cate?label_channel=<?php echo $channel_list[$key + 1]['id']?>" class="nav-list-link"><?php echo $channel_list[$key + 1]['title']?></a> </div> </div> {/if} {/volist} </div> ``` ### （三）奇偶循環 $key:是從0開始的 $i：是從1開始的 思路：取模運算，當是奇數的時候，循環輸出奇數和偶數內容 ``` {volist name="channel_list" id="cvo"} {if condition="$i%2 eq 1"} <div class="nav-list"> <div class="nav-list-item"><a target="_blank" rseat="712211_channel_yule" href="/index.php/index/index/cate?label_channel={$cvo.id}" class="nav-list-link">{$cvo.title}</a> </div> <div class="nav-list-item"><a target="_blank" rseat="712211_channel_zixun" href="/index.php/index/index/cate?label_channel=<?php echo $channel_list[$key + 1]['id']?>" class="nav-list-link"><?php echo $channel_list[$key + 1]['title']?></a> </div> </div> {/if} {/volist} ``` ## 三、首頁數據渲染 前臺指定調用條數：offset=0 length=4（從第一條開始，總共調用4條數據） ``` <ul class="qy-mod-ul"> {volist name="today_hot_list" id="thl_vo" offset=0 length=4} <li class="qy-mod-li"> <div class="qy-mod-img horizon"> <div class="qy-mod-link-wrap"> <a href="/index/play?id={$thl_vo.id}" target="_blank" title="{$thl_vo.title}" class="qy-mod-link"> <img src="{$thl_vo.img}" rseat="712211_focus_juchangimage" alt="{$thl_vo.title}" class="qy-mod-cover"> <div class="icon-tl"></div> <div class="icon-bl"></div> </a></div> <div class="title-wrap"><p class="main"> <a target="_blank" title="{$thl_vo.title}" href="/index/play?id={$thl_vo.id}" rseat="712211_focus_juchangtitle" class="link-txt"> {$thl_vo.title} </a> </p></div> </div> </li> {/volist} </ul> ```