当前位置: 代码迷 >> Web前端 >> 引见几款不错的轻量级jquery 幻灯片插件
  详细解决方案

引见几款不错的轻量级jquery 幻灯片插件

热度:394   发布时间:2012-06-26 10:04:13.0
介绍几款不错的轻量级jquery 幻灯片插件
  jquery 做幻灯片是不错的,有很多轻量级的,下面介绍几款轻量的jquery 幻灯片框架。

1 responsive-slides
   地址:http://responsive-slides.viljamis.com/
  特点:支持各浏览器
   ?Internet Explorer 6,7,8,9
?Firefox 3,6,8
?Safari 5
?Chrome 15
?Opera 11.5
?iOS Safari
?Opera Mobile 10.1
?Opera Mini for iOS
?IE7 Mobile
?Firefox Mobile
?Android browser
?Kindle browser

  使用简单,支持jquery 1.4以上就可以了,而且体积很小,压缩后不超过1KB,
使用如下:
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
  
  把图片放到ul中去
   <ul id="slides">
 
  • [img]1.jpg" alt="[/img]

  •  
  • [img]2.jpg" alt="[/img]

  •  
  • [img]3.jpg" alt="[/img]

  • </ul>
      再搞个CSS
       .rslides {
      position: relative;
      list-style: none;
      overflow: hidden;
      width: 100%;
      padding: 0;
      margin: 0;
      }

    .rslides li {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      }

    .rslides img {
      display: block;
      height: auto;
      float: left;
      width: 100%;
      border: 0;
      }
      马上就可以用了
      <script>
      $(function () {
        $("#slides").responsiveSlides();
      });
    </script>

    2 还有一些其他的jquery slides的教程和插件,如下
       http://www.zurb.com/playground/jquery_image_slider_plugin

       http://tympanus.net/Development/AutomaticImageMontage/

    http://buildinternet.com/live/supersized/
     
      相关解决方案