zoukankan      html  css  js  c++  java
  • PHPCMS-首页的二级导航、轮播效果

    导航栏:(header.html)

    <div id="menu">
    <a href="{siteurl($siteid)}"><div class="list" style="float:left">首页</div></a>
    {pc:content action="category" catid="0" num="5" siteid="$siteid" order="listorder ASC"}
       {loop $data $r}
           <div class="caidan">
           <a href="{$r[url]}"><div class="list">{$r[catname]}</div></a>
           <div class="erji">            
               {pc:content action="category" catid="$r[catid]" num="5" siteid="$siteid" order="listorder ASC" return="data1"}               {loop $data1 $v}
                    <a href="{$v[url]}"><div class="erjicaidan">{$v[catname]}</div></a>
                  {/loop}            
               {/pc}                             
           </div>
           </div>
       {/loop}
    {/pc}
    //js代码:
    $(document).ready(function(e) {
        $(".caidan").mouseenter(function(){
            $(".erji").css("display","none");
            $(this).children(".erji").css("display","block");
        })
        $(".caidan").mouseleave(function(){        
            $(this).children(".erji").css("display","none");        
            })
    });

     轮播特效(index.html):

    <div id="tupian">
       {pc:content  action="position" posid="18"  order="listorder DESC" thumb="1" num="5"}              
            {loop $data $r}
            <a href="{$r['url']}"><img class="lunbo" src="{thumb($r['thumb'],1200,300)}" width="1200" height="300" style="display:block" /></a>
            {/loop}
       {/pc}
    </div>
    //jquery代码
    var
    n=1; //当前要显示的图片索引 function ShowNow() { var img = $(".lunbo"); img.css("display","none"); img.eq(n).css("display","block"); if(n>=img.length-1) { n=0; } else { n++; } } window.setInterval("ShowNow()",1000);
  • 相关阅读:
    CentOS 6.5系统使用yum方式安装LAMP环境
    省市区三级联动—PCASClass
    javascript进击(九)参考手册
    javascript进击(八)JSON
    javascript进击(七)Ajax
    javascript进击(六)Jquery
    javascript进击(五)JS对象
    javascript进击(四)HTML DOM
    javascript进击(三)简介
    javascript进击(一)简介
  • 原文地址:https://www.cnblogs.com/jinshui/p/5678902.html
Copyright © 2011-2022 走看看