展站

了不的jQuery幻片插件flexslider,有接近3000 Star,是很靠的,下面是利用教程。
引入代
所有代都可以在flexlslider的Github上得。
引入css 文件和js 文件和jQuery 核心代:
站架
- <link rel="stylesheet" href="flexslider.css">
- <script src="jquery.min.js"></script>
- <script src="jquery.flexslider-min.js"></script>
代 HTML 代:
- <!-- Place somewhere in the <body> of your page -->
- <div class="flexslider">
- <ul class="slides">
- <li>
- <img src="slide1.jpg" />
- </li>
- <li>
- <img src="slide2.jpg" />
- </li>
- <li>
- <img src="slide.jpg" />
- </li>
- <li>
- <img src="slide4.jpg" />
- </li>
- </ul>
- </div>
站架 代 Javascript 代:
- $(window).load(function() {
- $('.flexslider').flexslider({
- animation: 'slide', // 必,主滑
- animationLoop: true, // 是不是回滑,默true
- itemWidth: 500, // 定每一item度,位px,默100%
- itemMargin: 0, // 界每一item margin,默0
- controlNav: false, // 是不是示滑制小,默true
- directionNav: false, // 是否示滑制控件,默true
- slideshowSpeed: 2000, // 每次主滑距,默7000,元ms
- animationSpeed: 500 // 手滑候,默600,元ms
- });
- });
代 文章出