网站建设
苏州SEO关键词优化一站式服务

WordPress网站制作banner轮播图的通用方法

使用Wordpress做网站时,制作banner轮播图也是非常简单,下面学做网站论坛一下制作banner轮播图的通用方法。

banner轮播图

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里;
  3. 在头部模板header.php里找到 标签,将下的代码放到 标签上面;(注意文件路径)
    
    <script type="text/javascript" src="/static/js/jquery1.42.min.js">
    <script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.3.js">
    
    
  4. 使用以下的代码替换原来的网站轮播图代码。(一般在header.php)
    
    
     
     
    • 1
    • 2
    • 3
    • 4
     
     
     
       
    • <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner01.jpg" />
    •  
    • <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner02.jpg" />
    •  
    • <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner03.jpg" />
    •  
    • <a href="https://www.xuewangzhan.net/wpbbs/" target="_blank"><img src="https://www.xuewangzhan.net/wpbbs//static/picture/banner04.jpg" />
    •  
     
           
        jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});  
  5. 在CSS文件里添加以下控制轮播图的CSS样式代码。
    
    /* 本例子css */
        .slideBox{ width:980px; height:280px; overflow:hidden; position:relative; border:1px solid #ddd; }
        .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
        .slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
        .slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
        .slideBox .hd ul li.on{ background:#f00; color:#fff; }
        .slideBox .bd{ position:relative; height:100%; z-index:0;  }
        .slideBox .bd li{ zoom:1; vertical-align:middle; }
        .slideBox .bd img{ width:100%; height:100%; display:block; }
    
        /* 下面是前/后按钮代码,如果不需要删除即可 */
        .slideBox .prev,
        .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;  }
        .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
        .slideBox .prev:hover,
        .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
        .slideBox .prevStop{ display:none; }
        .slideBox .nextStop{ display:none; }
    
    
  6. 上传四张轮播图片,图片名为分为:banner01.jpg、banner02.jpg、banner03.jpg、banner04.jpg ,放到自己的图片文件夹里(picture文件夹);
  7. 这样就成功的制作好了wordpress网站banner轮播图。
历史上的今天
十二月
17
    哇哦~~~,历史上的今天没发表过文章哦
赞(0) 打赏
未经允许不得转载:苏州SEO优化 » WordPress网站制作banner轮播图的通用方法
分享到: 更多 (0)
标签:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)

网站建设与SEO关键词优化一站式服务

SEO咨询建站咨询

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
订阅图标按钮