位置：首页 > CMS教程 > WordPress

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

发布时间：2023-04-10 08:17:36

文章来源：快乐收录网

访问次数：

使用WordPress做网站时，制作banner轮播图也是最简单，下面学做网站论坛一下制作banner轮播图的通用方法。VrY快乐收录网

VrY快乐收录网

方法/步骤

下载网站特效功能万能JS插件包

；将下载的压缩包解压出来，将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里；VrY快乐收录网

在头部模板header.php里找到</head> 标签，将下的代码放到</head> 标签上面；（注意文件路径）

使用以下的代码替换原来的网站轮播图代码。（一般在header.php）

1 2 3 4 <li><a href="<?php echo get_option(home); ?>" target="_blank"><img src="<?php bloginfo(template_directory); ?>

/static/picture/banner01.jpg" />VrY快乐收录网

<li><a href="<?php echo get_option(home); ?>" target="_blank"><img src="<?php bloginfo(template_directory); ?>

/static/picture/banner02.jpg" />VrY快乐收录网

<li><a href="<?php echo get_option(home); ?>" target="_blank"><img src="<?php bloginfo(template_directory); ?>

/static/picture/banner03.jpg" />VrY快乐收录网

<li><a href="<?php echo get_option(home); ?>" target="_blank"><img src="<?phpbloginfo(template_directory); ?>

/static/picture/banner04.jpg" />VrY快乐收录网

jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});VrY快乐收录网

</script>

在CSS文件里添加以下控制轮播图的CSS样式代码。

/* 本例子css */VrY快乐收录网

.slideBox{ width:980px; height:280px; overflow:hidden; position:relative; border:1px solid #ddd; }VrY快乐收录网

.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }VrY快乐收录网

.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }VrY快乐收录网

.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }VrY快乐收录网

.slideBox .hd ul li.on{ background:#f00; color:#fff; }VrY快乐收录网

.slideBox .bd{ position:relative; height:100%; z-index:0; }VrY快乐收录网

.slideBox .bd li{ zoom:1; vertical-align:middle; }VrY快乐收录网

.slideBox .bd img{ width:100%; height:100%; display:block; }VrY快乐收录网

/* 下面是前/后按钮代码，如果不需要删除即可 */VrY快乐收录网

.slideBox .prev,VrY快乐收录网

.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; }VrY快乐收录网

.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }VrY快乐收录网

.slideBox .prev:hover,VrY快乐收录网

.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }VrY快乐收录网

.slideBox .prevStop{ display:none; }VrY快乐收录网

.slideBox .nextStop{ display:none; }

上传四张轮播图片，图片名为分为：banner01.jpg、banner02.jpg、banner03.jpg、banner04.jpg ，放到自己的图片文件夹里（picture文件夹）；这样就成功的制作好了wordpress网站banner轮播图。

　　《WordPress网站制作banner轮播图的通用方法（制作网页轮播图）》更新于时间：2023-04-10 08:17:36；由本站小编进行发布，目前浏览的小伙伴达到，感谢你们的支持，后期快乐收录网小编会继续为大家更新更多相关的文章，希望广大网友多多关注快乐收录网工作心得栏目，如果觉得本站不错，那就给我们一个分享的支持吧！

WordPress网站制作banner轮播图的通用方法（制作网页轮播图）特别声明

本站快乐收录网提供的WordPress网站制作banner轮播图的通用方法（制作网页轮播图）都来源于网络，不保证文章的准确性和真实性，同时，对于该文章所造成的影响，不由快乐收录网实际控制，在2023-04-10 08:17:36收录时，该网页上的内容，都属于合规合法，如有侵权违规，可以直接联系网站管理员进行整改或删除，快乐收录网不承担任何责任。

快乐收录网：致力于优质、实用的网络站点资源收集与分享！本文地址：https://nav.klxjz.cn/CMS/WordPress/93235.html转载请注明

标签：

资讯分类