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

以前我添加的滚动图片功能大多是用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="http://www.azimiao.com/wp-content/uploads/2017/01/back.jpg"/>
		</li>
		<li>
			<img src="http://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]【有野出没】唐野 控制条显隐控制

我来吐槽

*

*

7位绅士参与评论

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

    大佬大佬 :mrgreen:

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

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

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

    qaq 很强耶!!!

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

    自适应,感觉不错啊 😀