学会偷懒,并懒出境界是提高工作效率最有效的方法!
Ctrl + D 收藏我吧~
jQuery四图图片通栏代码,支持多种插件效果,支持左右箭头和圆点翻页,兼容主流浏览器,懒人图库推荐下载!
使用方法:
1、在页面引入以下代码结构
<div class="view-port">
<div class="slider-container">
<div class="item">
<img src="http://lorempixel.com/220/124/nature/1/">
<p>Trailer 1</p>
</div>
<div class="item">
<img src="http://lorempixel.com/220/124/nature/1/">
<p>Trailer 1</p>
</div>
</div>
</div>
2、引入如下css
.view-port {
overflow: hidden;
position: relative;
}
.slider-container {
position: relative;
margin: 0;
padding: 0;
}
.item {
position: absolute;
}
3、加载jquery.silver_track.js插件,然后调用以下js代码
var track = $(".slider-container").silverTrack();
var parent = track.container.parents(".track");
// 左右箭头
track.install(new SilverTrack.Plugins.Navigator({
prev: $("a.prev", parent),
next: $("a.next", parent)
}));
//下面三个小圆点
track.install(new SilverTrack.Plugins.BulletNavigator({
container: $(".bullet-pagination", parent)
}));
track.start();