京东自营 + 国补 iPhone 历史最低价          国家补贴 享8折

jQuery四图图片通栏代码

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();

下载方法:
1、请用微信扫描下方二维码关注时代Java公众号,或者微信搜索时代JavaNowJava关注。
    (如已经关注,请直接发送编号)
2、在时代Java公众号里发送编号:5520
5520
3、发送后,将立刻收到 “验证码已经接收成功” 的回复,即可选择线路下载:
通用网络下载移动网络下载电信网络下载

本文系作者在时代Java发表,未经许可,不得转载。

如有侵权,请联系nowjava@qq.com删除。

编辑于

关注时代Java

关注时代Java