之前用的主题都添加了首页滚动图片，这次本不打算再搞这些，但为了美观还是加上一个吧。
以前我添加的滚动图片功能大多是用WP插件搞定的。例如在宾果大神Beginning主题中，我使用了”MasterSlider”插件，只需在后台设置好幻灯片组，然后将短代码复制到首页就搞定了。但这次没打算搞这些，看到唐野大神首页用的ResponsiveSlides.js不错，就拿过来用了，顺便把他的CSS样式抄了过来。
根据CC协议，这些东西需要保持“相同方式共享”，因此我把这些内容记录下来。
responsiveslides.js简介
ResponsiveSlides.js是一款jQuery幻灯片插件，核心功能完整而体积很小（<4KB）。
官方网站:http://responsiveslides.com/
如何使用
该插件的所有功能都可以在官方网站得到很直观的说明，我仅写下所需内容。
引入jQuery库与ResponsiveSlides
<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="//js.azimiao.com/responsiveslides.min.js"></script>添加必须的HTML标签
为了方便调整边距，我在官方要求的标签外面套了一层DIV。一般情况下，这些东西放在首页内容容器的顶部即可。
<div class="mySliderBar">
<ul class="rslides" id="slider">
<li>
<img src="//www.azimiao.com/wp-content/uploads/2017/01/back.jpg"/>
</li>
<li>
<img src="//www.azimiao.com/wp-content/uploads/2017/01/back.jpg"/>
</li>
</ul>
</div>添加CSS样式
在官方提供的样式之外，我照搬了唐野大神所写的控制条样式。同时还根据主题所需的边距、阴影等添加了对应样式。如有响应式布局样式，请一并添加。
.mySliderBar {
position: relative;
width: 100%;
margin-bottom: 15px;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
border-radius: 5px;
box-shadow: 0 0 5px #ddd;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
/* 以下CSS内容转载自有野出没(http://www.yelook.com) */
/* 导航条样式 */
/* 作者：唐野 */
.slide_nav {
position: absolute;
-webkit-tap-highlight-color: transparent;
top: 52%;
left: 0;
opacity: .3;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url(http://cdn.yelook.com/wp-content/themes/YeLook/img/themes.gif) no-repeat left top;
margin-top: -45px;
display: none
}
.slide_nav:active {
opacity: 1
}
.slide_nav.next {
left: auto;
background-position: right top;
right: 0
}
/* 结束 */添加jQuery代码
根据官方说明，我所需要的参数只有这些(照搬唐野大神代码)，你可以将它放置到主题js中，也可以将其贴在首页。但要注意：写在首页时您可能需要将$变为jQuery。
$("#slider").responsiveSlides({
auto:true, // Boolean: Animate automatically, true or false
pager:false, // Boolean: Show pager, true or false
nav:true, // Boolean: Show navigation, true or false
speed:500, // Integer: Speed of the transition, in milliseconds
pauseControls:true, // Boolean: Pause when hovering controls, true or false
pager:true, // Boolean: Show pager, true or false
manualControls:"auto", // Selector: Declare custom pager navigation
namespace:"rslide" // String: Change the default namespace used
});我还照搬了唐野大神的导航条显示隐藏代码，即利用jQuery淡入淡出，在鼠标悬浮时显示导航条，鼠标离开时隐藏导航条。同样，将其放置在主题js中或直接置于首页中。
/* 以下JS内容转载自有野出没(http://www.yelook.com) */
/* 导航条样式 */
/* 作者：唐野 */
$(".mySliderBar").hover(function() {
$(".slide_nav").fadeIn(200)
},
function() {
$(".slide_nav").fadeOut(200)
});
/* 结束 */效果
如本博首页所示。
缺点
因我用不到后台控制，因此我并未添加后台控制，这样一来替换图片等只能通过修改html标签组内容来实现了。但可以明白的是，ResponsiveSlides.js是一个很好的幻灯片插件，任何人都可以根据需要进行功能扩展，甚至把它写成一个WP插件。
引用资料
1、[头图]【Bangumi】Bangumi Bangumi404小电视标志
2、[插件]【ResponsiveSlides】viljamis ResponsiveSlides.js
2、[CSS]【有野出没】唐野 控制条样式
2、[JS]【有野出没】唐野 控制条显隐控制
