欢迎来到懒人图库!
  • 首 页
  • 懒人论坛
  • jQuery四图图片通栏代码

    2014-09-09 来源/作者:懒人图库 分类:图片特效 «»
    jQuery四图图片通栏代码 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();

    效果预览 本地下载  新手使用求助QQ群:133049023
    标签:图片特效