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

以前我添加的滚动图片功能大多是用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;
    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://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:"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. [头图]【Bangumi】Bangumi Bangumi404小电视标志
  2. [插件]【ResponsiveSlides】viljamis ResponsiveSlides.js
  3. [CSS]【有野出没】唐野 控制条样式
  4. [JS]【有野出没】唐野 控制条显隐控制

我来吐槽

*

*

6位绅士参与评论

  1. zhou01-09 01:00 回复

    求助大佬,这个幻灯片8个显示正常添加第9个轮播到第9个的时候整个幻灯片都消失了是什么情况?

  2. 淘气12-05 07:48 回复

    大佬大佬 :mrgreen:

  3. 后宫学长12-04 00:42 回复

    没,没看见首页有图哎。 ❗

  4. 北海12-02 20:54 回复

    qaq 很强耶!!!

  5. 岁月小筑12-02 01:36 回复

    自适应,感觉不错啊 😀