 展示站  了不的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="slide3.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
- });
- });
代 文章出 |