学做网站培训课程介绍

当前位置：

wordpress网站轮播切换图幻灯片「后台控制」制作

WORDPRESS网站制作首页顶部的轮播切换图的方法，之前论坛中讲过自己建网站如何制作轮播切换图，但制作出来的轮播切换图的尺寸是固定不变的，而且切换的图片内容也是固定设置的，如果要更换图片，就需要通过FTP软件去修改。

制作Wordpress轮播切播图常用的有以下二种方法：

方法一：通过WORDPRESS轮播图插件制作

WORDPRESS有很多有用功能插件，其中就包括一款轮播图插件，通过这个插件就可以轻松制作出轮播图。使用方法见：WordPress轮播图幻灯片插件Slideshow Gallery

方法二：通过代码制作轮播图

下面介绍一种非插件的方法制作WORDPRESS网站轮播切换图的方法，它最大的好处在于网站管理员可以随意在网站后台去控制要显示的内容。我们先来看看它制作好后的样式吧！

8

 

方法/步骤

第一步：将以下代码放入自己网站主题的functions.php中,用于显示缩略图

//缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo('template_url') . "/images/default.jpg";
};
return $first_img;
}

第二步：在网站上需要显示轮播切换图的位置，放上以下的HTML代码。

<!--图片轮播区-->
<div id="com_box" class="com_box ftl">

<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//对数组逆向排序，即大ID在前
$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>

<div class="img dpn"><a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img class="img_directly_load" src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /></a></div>
<?php endwhile; endif; ?>

<ul id="com_txt" class="title">
<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//对数组逆向排序，即大ID在前
$sticky = array_slice( $sticky, 0, 5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>
<li></li>
<?php endwhile; endif; ?>
</ul>

</div>
<script type="text/javascript">

function com_change()
{
var self_now = 0;
var self_speed = 5000;
var self_auto_change = null;
var self_max = $('#com_box div.img').size();
function self_change(i)
{
$('#com_box div.img').hide();
$('#com_txt_bg li').removeClass('on');
$('#com_txt li').removeClass('on');
$('#com_box div.img:eq(' + i + ')').show();
$('#com_txt_bg li:eq(' + i + ')').addClass('on');
$('#com_txt li:eq(' + i + ')').addClass('on');
}
function self_interval()
{
return setInterval(function(){
self_now++;
if (self_now >= self_max)
{
self_now = 0;
}
self_change(self_now);
}, self_speed);
}
$('#com_box div:first').show();
$('#com_txt_bg li:first').addClass('on');
$('#com_txt li:first').addClass('on');
$('#com_txt li').each(function(i)
{
$(this).mouseover(function(){
self_now = i;
clearInterval(self_auto_change);
self_change(i);
}).mouseout(function(){
self_auto_change = self_interval();
});
});
$(function(){
$('#com_loding').hide();
self_auto_change = self_interval();
});
}
com_change();
</script>

第三步：即然是切换图片，就少不了JS的帮助，下载JS文件:  jquery.js
将下载的JS文件放到images文件夹下，在header.php上面放上一个js代码：

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.js"></script>

第四步：下面就是通过CSS来控制图片显示的样式了，复制以下的CSS样式，放到自己网站的CSS文件的特别下方。(width:627px代表轮播切换图幻灯片宽度，可以根据自己需要修改)

/*换灯片*/
.com_box {width:627px;height:279px;overflow:hidden;position:relative;}
.com_box img{width:100%;height:100%;}
.com_box ul.title li.on {background:#3598db;}
.com_box ul.title {position:absolute;bottom:10px;right:5px;z-index:9;}
.com_box ul.title li {counter-increment:listxh;display:inline-block;border-radius:12px;background: #000;}
.com_box ul.title li:before{content:counter(listxh);display:inline-block;text-align:center;color:#fff;width:24px;height:24px;line-height:24px;font-weight:600;font-size:11px;font-family: "微软雅黑";}

第五步：如何在网站后台去控制切换图片的内容呢？很简单了，只需要在网站后台设置哪些要显示的内容的文章置顶即可，这样这些文章中的图片就会自动的调用到切换图中来了。
2

《“wordpress网站轮播切换图幻灯片「后台控制」制作”》 有 5 条评论

  1. 学习建网站学员 小小菜鸟说道：
    2017年3月2日 上午8:36

    制作了，也显示了。但是文章页和Page页都乱了。显示的都是幻灯片图片。

    回复
  2. 学习建网站学员 绿软库说道：
    2017年11月16日 上午12:56

    好像就适用于首页

    回复
    • 学做网站论坛讲师 学做网站讲师说道：
      2017年11月16日 上午9:20

      在列表页和文章页是与其循环代码产生了冲突，解决方法：可以在后台新建一个分类存放幻灯片的文章，然后调用这个分类下的文章。这在我们的建站课程中也讲到了。

      回复
  3. 学习建网站学员 colinyan说道：
    2019年11月11日 上午10:31

    首先感谢您的分析，特别好！但是我在操作中遇到一个问题：
    必须要把jQuery放到image文件件下吗？我的页面使用了bootstrap，在js文件夹里有jQuery，页面内也引入了jQuery，虽然正常显示了，但是点击的话没有反应，不知道为什么。这是我的页面http://qiyueehibitionhall.gz01.bdysite.com/wordpress/#next
    影像风采 一栏是使用了您的代码的内容。
    请您指教，不胜感激！

    回复
  4. 学习建网站学员 杨说道：
    2020年10月10日 下午11:52

    请问image所在的文件夹是哪个啊，有很多image文件夹啊

    回复

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 漂亮的wordpress淘客模板 图文教程 (111440 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • 用什么建网站？Wordpress建网站好不好 (110907 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • 如何制作网站轮播图（网页图片轮播幻灯片代码分享） 图文教程 (135767 次浏览)
    各位同学大家好，我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间，对我的辅导帮助。现在在这里我想给同学做分享一
  • 网站轮播图换成一张图片的操作方法 图文教程 (121938 次浏览)
    在我们仿站过程中，有点网站上带有轮播图，大多都是通过ＪＳ＋ＦＬＡＳＨ的方式。这会给网站带来大量的冗余代码。如果你不喜欢，可以用一张图片来替换
  • JS+HTML纯代码制作网站切换图 图文教程附件下载 (125852 次浏览)
    可以说任意一个网站都少不了换灯片，在之前的课程里学做网站论坛也列举了很多网站幻灯片代码，通过这些方法，我们可以制作作某一个规定尺寸的换灯片，
  • JS实现Tab菜单滚动切换的方法 图文教程附件下载 (148085 次浏览)
    我们在学习网站制作过程，发现很多网站都采用tab切换菜单来显示不同栏目的内容，这样即可以节省网站版面，也可以更多的显示网站的栏目内容。如何在自
  • Wordpress幻灯片插件Slideshow Gallery (111266 次浏览)
    插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • wordpress登录后台无反应彻底解决办法 图文教程 (119238 次浏览)
    之前有很多建网站学员反映，自己学习了wordpress教程，制作了网站，但有时会碰到wordpres后台无法登录，密码确认无误，空间没有问题，之前也成功登录
  • Wordpress忘记后台管理员密码怎么办 图文教程 (128884 次浏览)
    忘记后台登录密码是自己建网站学员经常犯的错误，如果在使用wordpress程序建网站时，忘记了后台管理员登陆密码要如何解决？下面学做网站论坛
  • 建网页知识：CSS控制网页DIV层水平垂直居中 (121458 次浏览)
    在网站布局过程中，运用div+css的布局是特别有利的，通常我们需要对一个div层进行居中处理，那么如何通过css属性对它进行控制呢：下面分享一个建网页
  • 一个CSS样式来控制多个DIV 视频教程 (113898 次浏览)
    欢迎大家学习学做网站论坛的CSS视频教程，这节课程我们讲一下如何使用一个CSS样式来控制多个DIV。在网页制作过程中，写CSS追求代码简洁，如果多个
  • 新手学习网站制作（0基础入门） 图文教程 (111791 次浏览)
    零基础新手要学习网站建设，以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了，才能为以后建网站打下坚实的基础。
  • 上海电气公司网站制作案例 图文教程 (15810 次浏览)
    这是一家上海电气公司网站，网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO，网站导航制作使用全屏宽度菜单，每个菜单项宽

建站培训课程

最新教程

其它教程