使用ResponsiveSlides.js添加了首页幻灯片

之前用的主题都添加了首页滚动图片，这次本不打算再搞这些，但看起来总感觉怪怪的。为了美观，还是加上一个吧。

以前我添加的滚动图片功能大多是用 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="//[yoururl]/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;
    padding:0;
}
.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://[your-url]/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:"slide"  // 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. [插件]【ResponsiveSlides】viljamis ResponsiveSlides.js
2. [CSS]【有野出没】唐野 控制条样式
3. [JS]【有野出没】唐野 控制条显隐控制