• Page 1 of 1
  • 1
轻量级滑动轮播slides.js
访问slidesJS网站 >

轮播效果有很多,slidesJS小巧易搞定兼容好,用法如下:

步骤一:在html里面这样写

Code
<div id="slides">
      <div class="slides_container">
         <div><img src="http://image/bg00.png"></div>
         <div><img src="http://image/bg01.png"></div>
         <div><img src="http://image/bg02.png"></div>
         <div><img src="http://image/bg03.png"></div>
      </div>
</div>


上面轮的是图片,slideJS其实不限div里面的内容

步骤二:引用js文件且在页面里设置参数

Code
<script type="text/javascript" src="../Scripts/slides.min.jquery.js"></script>
<script>
     $(function(){
      $('#slides').slides({
       preload: true,          //是否预载入图片
       preloadImage: 'images/loading.gif',   //载入icon的路径
       play: 5000,          //自动播放的间隔时间
       pause: 2500,          //翻页按钮的响应延时时间
       hoverPause: true,        //鼠标移入时中止播放
       generateNextPrev: true,        //生成上页下页按钮
       next: 'next',        //设置下页按钮名
       prev: 'prev',        //设置上页按钮名
       pagination: true,        //使用翻页效果,设置为false会没效果咯,一般不设置
       generatePagination: true        //生成页码控件,如果设为false,页面间的跳转会报错
      });
     });
</script>


更多参数设置去slideJS网站看,很详细不过是英文的

步骤三:css要写这些东西——

Code
<style type="text/css" media="screen">
               .slides_container {
                   width:570px;
                   height:270px;
               }
               .slides_container div {
                   width:570px;
                   height:270px;
                   display:block;
               }
</style>


一个是容器的高宽,一个是单元高宽,可以自己设置,要点是两者一样大

页码和翻转按钮的style也可以自己设置哦

这样就完成了,很好搞定有木有

效果看这里

想换用FlexSlider看这里
SlidesJS 3

SlidesJS更新到3了,3增加了fade这种切换方式,另外code简化了,但是生成的页面增加了较复杂的结构。

自动播放、翻页和页码都支持独立的切换方式,互不影响。

下面来看看新的code


Code
<div id="slides">
    <img src="http://placehold.it/1">
    <img src="http://placehold.it/2">
    <img src="http://placehold.it/3">
</div>

JS部分

Code
$(function(){
    $("#slides").slidesjs({
      width: 700,
      height: 377
    });
});

不知道为什么长宽变成必须设置的了,其他预设属性可以去他们官网看。

-------------------------------------------------------我是平凡的分隔线-------------------------------------------------------

SlidesJS VS FlexSlider

文件大小:SlidesJS绝对的轻量级,胜出

加载:SlidesJS不需要等内容加载完便可显示,FlexSlider需要内容加载完才会显示,各有需求群,平手

自定义样式:两种均支持滑动和淡入淡出效果,支持自定义翻页,SlidesJS3不支持自定义页码,两者均支持响应式界面尺寸,FlexSlider略胜

功能:SlidesJS2支持页面内容实现页码功能,SlidesJS3及FlexSlider均不支持,SlidesJS2胜出

最后,两者均免费
  • Page 1 of 1
  • 1
Search: