WordPress实现首页轮播图

WordPress实现首页轮播图
前段时间为了实现WordPress站点全面移动化的战略，感觉电脑访问WordPress的页面过于空乏，既然如此就加入首页轮播图功能丰富页面，于是记录下来。
改进后大大提升了站点的用户体验，那么该如何修改才可以使WordPress实现首页轮播图呢？
这个功能还是很有实际意义的，可以把你定制的个性化广告放上增加收入。

将下方代码添加进function即可实现：

//首页轮播图
function feed_slide() {?>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/responsiveslides.min.js"></script>
<div style="width:100%;margin-top:10px" align="center">
<style type="text/css">
ul,li{list-style:none;}
.slick{width:100% !important; height:auto;margin:0 auto;overflow:hidden;position:relative;}
.slick li{width:100%;}
.slick img{width:90%;border-radius:2%;}
</style>
<ul class="slick">
<li id="1" class=""><a href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/img" alt=""><span></span></a></li>
<li id="2" class=""><a href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/img" alt=""><span></span></a></li>
<li id="3" class=""><a href="<?php echo get_bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/img" alt=""><span></span></a></li>
</ul>
<script>
$(function() {
  var mx = document.body.clientWidth;
  $(".slick").responsiveSlides({
     auto: true,//设置是否自动播放, true or false
     pager: false,//是否显示页码, true or false
     nav: false,//是否显示左右导航箭头（即上翻下翻）, true or false
     speed:700,//动画持续时间，单位毫秒
     timeout: 7000,//图片之间切换的时间，单位毫秒
     maxwidth: mx,//幻灯的最大宽度
     namespace: "centered-btns"//修改默认的容器名称
    });
});
</script>
<div class="ws_shadow"></div>
</div><?php
}

未经允许不得转载：WordPress组织 » WordPress实现首页轮播图