幻灯片jquery.SuperSlide插件

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

本站郑重声明：jquery.SuperSlide插件著作版权归原作者大话主席所有。感觉不错可以支持下作者：http://www.superslide2.com/。

本插件建议用于PC端网页，移动端建议使用TouchSlide插件。

引入jQuery 和 jquery.SuperSlide.js

<script type="text/javascript" src="//lib-h-ui-net/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="//lib-h-ui-net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>

4.4.1 焦点图效果(自动播放，圆点控制)

HTML SCSS CSS JS

<div id="hui-carousel-demo">
  <div class="hui-carousel">
    <div class="bd">
      <ul>
        <li>
          <a href="http://www.h-ui.net/" target="_blank"><img src="h-ui/images/temp/banner-1.jpg" ></a>
        </li>
        <li>
          <a href="http://www.h-ui.net/zhaoshang.shtml" target="_blank"><img src="h-ui/images/temp/banner-2.jpg" ></a>
        </li>
        <li>
          <a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="h-ui/images/temp/banner-3.jpg" ></a>
        </li>
      </ul>
    </div>
    <ol class="hd cl dots">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
</div>

.hui-carousel {
  position: relative;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
  .bd,
  .bd li,
  .bd img {
    width: 100%;
    height: 100%;
  }
  .bd {
    z-index: 2;
    overflow: hidden;
    li {
      float: left;
      width: 100%;
      overflow: hidden;
      background-position: center;
      background-repeat: no-repeat;
      a {
        display: block;
        width: 100%;
        height: 100%;
      }
      img {
        display: block;
      }
    }
  }
  .hd {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 10px;
    text-align: center;
    li {
      display: inline-block;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      background-color: #C2C2C2;
      &.active {
        background-color: #222;
      }
    }
    /*圆点*/
    &.dots {
      li {
        width: 10px;
        height: 10px;
        font-size: 0px;
        line-height: 0px;
        @include borderRadius(50%);
      }
    }
    /*数字*/
    &.numbox {
      li {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        font-family: Arial;
        font-weight: bold;
        text-indent: inherit;
        &.active {
          color: #fff
        }
      }
    }

    /*长方条*/
    &.rectangle {
      li {
        width: 40px;
        height: 10px;
        font-size: 0px;
        line-height: 0px
      }
    }
  }

  .hui-carousel-arrow {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    z-index: 3;
    opacity: 0.7;
    filter: alpha(opacity=70);
    &:hover {
        opacity: 1;
        filter: alpha(opacity=100)
    }
    &.prev {
        left: 0;
    }
    &.next {
        right: 0;
    }
  }
}

.hui-carousel {
  position: relative;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
}
.hui-carousel .bd,
.hui-carousel .bd li,
.hui-carousel .bd img {
  width: 100%;
  height: 100%;
}
.hui-carousel .bd {
  z-index: 2;
  overflow: hidden;
}
.hui-carousel .bd li {
  float: left;
  width: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
}
.hui-carousel .bd li a {
  display: block;
  width: 100%;
  height: 100%;
}
.hui-carousel .bd li img {
  display: block;
}
.hui-carousel .hd {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 10px;
  padding: 0 10px;
  text-align: center;
  /*圆点*/
  /*数字*/
  /*长方条*/
}
.hui-carousel .hd li {
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  cursor: pointer;
  background-color: #C2C2C2;
}
.hui-carousel .hd li.active {
  background-color: #222;
}
.hui-carousel .hd.dots li {
  width: 10px;
  height: 10px;
  font-size: 0px;
  line-height: 0px;
  border-radius: 50%;
}
.hui-carousel .hd.numbox li {
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 13px;
  font-family: Arial;
  font-weight: bold;
  text-indent: inherit;
}
.hui-carousel .hd.numbox li.active {
  color: #fff;
}
.hui-carousel .hd.rectangle li {
  width: 40px;
  height: 10px;
  font-size: 0px;
  line-height: 0px;
}
.hui-carousel .hui-carousel-arrow {
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  z-index: 3;
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.hui-carousel .hui-carousel-arrow:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}
.hui-carousel .hui-carousel-arrow.prev {
  left: 0;
}
.hui-carousel .hui-carousel-arrow.next {
  right: 0;
}

调用代码：

$(function(){
  jQuery("#hui-carousel-demo .hui-carousel").slide({
    mainCell: ".bd ul",
    titCell: ".hd li",
    trigger: "click",
    effect: "leftLoop",
    autoPlay: true,
    delayTime: 700,
    interTime: 3000,
    pnLoop: false,
    titOnClassName: "active"
  });
});

默认hd上面追加的dots为圆点，将dots改为numbox就变成带数字的方框，rectangle为不带数字长方条

#hui-carousel-demo{ width: 960px; height: 273px; overflow: hidden}/*这个是demo页面定义尺寸的样式，请根据自己幻灯片的尺寸重新定义。切莫生搬硬套。*/

宽屏幻灯片效果，要想撑满屏幕，建议图片宽度做成2000px以上，中间主要视觉区间控制在网页的宽度之内，两边过渡到纯色，图片通过li上背景的方式去实现。这样不管是宽屏的还是窄屏的都可以很好的展示。具体效果见： http://lib-h-ui-net/jquery.SuperSlide/2.1.1/demo/02/demo.html

4.4.2 带缩略图效果

HTML SCSS CSS JS

<div id="hui-carousel-1" class="bg-fff box-shadow radius">
  <div class="hui-carousel">
    <div class="bd bg-fff">
      <ul>
        <li><a href="#" target="_blank"><img src="images/b-1.jpg" ></a></li>
        <li><a href="#" target="_blank"><img src="images/b-2.jpg" ></a></li>
        <li><a href="#" target="_blank"><img src="images/b-3.jpg" ></a></li>
        <li><a href="#" target="_blank"><img src="images/b-4.jpg" ></a></li>
        <li><a href="#" target="_blank"><img src="images/b-5.jpg" ></a></li>
        <li><a href="#" target="_blank"><img src="images/b-6.jpg" ></a></li>
      </ul>
    </div>
    <ol class="hd clearfix">
      <li><i></i><img src="images/s-1.jpg"></li>
      <li><i></i><img src="images/s-2.jpg"></li>
      <li><i></i><img src="images/s-3.jpg"></li>
      <li><i></i><img src="images/s-4.jpg"></li>
      <li><i></i><img src="images/s-5.jpg"></li>
      <li><i></i><img src="images/s-6.jpg"></li>
    </ol>
  </div>
</div>

#hui-carousel-1 { width:760px;text-align:center}
#hui-carousel-1 .bd,
#hui-carousel-1 .bd li,
#hui-carousel-1 .bd img { width:760px; height:220px}
#hui-carousel-1 .hd { margin-top:2px;height:58px;width:762px}
#hui-carousel-1 .hd li { position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px}
#hui-carousel-1 .hd li img{ display:block;width:125px; height:58px}
#hui-carousel-1 .hd li i { position:absolute; display:block; z-index:9; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6)}
#hui-carousel-1 .hd li.active i { width:11px; height:6px; background:url(images/iconpic-arrow-up.png) no-repeat 0 0; top:-6px; left:50%; margin-left:-5px; bottom:auto; right:auto}

调用代码：

$(function(){
  jQuery("#hui-carousel-1 .hui-carousel").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:850,interTime:7000,pnLoop:false,titOnClassName:"active"})});

很多幻灯片的效果都大同小异，只要你熟悉前端布局，举一反三，少加修改，就能变成不同的布局效果。

相关参数

参数	版本	默认值	说明	详细
type	2.1	slide	效果类型，可选"slide"\|\|"menu"，引入type:"menu"专门处理菜单/导航效果
defaultPlay	2.1	true	默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单
returnDefault	2.1	false	鼠标移出容器，是否返回默认状态，常用于导航/菜单
mouseOverStop	2.1	true	鼠标移到容器层（无缝滚动是mainCell）是否停止播放
playStateCell	2.1	".playState"	播放/暂停状态按钮，点击后会增加/删除"pauseState"类名用于控制样色。可参考 [2.22-真·全屏焦点图]
switchLoad	2.0 > 2.1	null	内容切换加载，暂时只支持图片，必须配合后台程序使用。当为图片的时候switchLoad为图片实际路径的属性名称，例如switchLoad:"_src" [v2.1] 修复当scroll>1时，switchLoad无效的bug。	详解
easing	2.0 > 2.1	"swing"	缓动效果； [v2.1]更改默认效果为“swing”，使效果更流畅	所有
startFun	2.0 > 2.1	null	每次切换效果开始时执行函数，用于处理特殊情况或创建更多效果。用法 satrtFun:function(i,c){ }；其中i为当前分页，c为总页数 [v2.1]增加传递参数，startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，这样简写就方便了。例如 jQuery(".slideBox").slide({ startFun:function( i,c,s ){ s.show() } }); 这里的 s.show() 相当于 jQuery(".slideBox").show()	详解
endFun	2.0 > 2.1	null	每次切换效果结束时执行函数，用法和startFun一致	详解
triggerTime	2.0	150	毫秒，titCell触发时间，默认150毫秒延迟，以防重复执行效果。若为0即鼠标移过titCell立刻执行效果
targetCell	2.0 > 2.1	null	切换元素对象，处理内容切换元素非包裹状态下等情况，实现更多效果，处理更多情况，能和titCell、mainCell同时使用。只支持fade效果。 [v2.1] 增加支持slideDown效果。	详解
pageStateCell	2.0	".pageState"	分页状态对象，用于显示分页状态，例如：2/3
pnLoop	2.0	true	前/后按钮是否继续循环，若为false则当翻动到最前/后页时，前/后按钮点击无效，同时增加prevStop/nextStop类名控制样色
opp	2.0	false	默认反方向运动，例如 effect:"leftMarquee" 然后设置 opp:true，则效果为右滚动。常用于leftMarquee/topMarquee
autoPage	1.2 > 2.1	false	[v1.2] 程序自动分页，需结合titCell使用，若为true，则titCell为导航元素的包裹层对象。ps：scroll>1时，记得设置autoPage:true，否则分页错误。 [v2.1] 支持自定义分页html，$为数字替换位置。例如autoPage:"<li><a>$</a></li>"，如果不想输出数字：autoPage:"<li><a></a></li>"。	图解
titCell	1.0	".hd li"	导航元素对象（鼠标的触发元素对象）	图解
mainCell	1.0	".bd"	切换元素的包裹层对象	图解
effect	1.0 > 2.0 >2.1	"fade"	动画效果 [v1.0] fade：渐显； \|\| top：上滚动；\|\| left：左滚动；\|\| topLoop：上循环滚动；\|\| leftLoop：左循环滚动；\|\| topMarquee：上无缝循环滚动；\|\| leftMarquee：左无缝循环滚动； [v2.0] fold：淡入淡出 [v2.1] slideDown：下拉效果
autoPlay	1.0	false	自动运行
interTime	1.0	2500	毫秒；自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。
delayTime	1.0	500	毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）。
trigger	1.0	"mouseover"	titCell触发方式 \|\| mouseover：鼠标移过触发；\|\| click：鼠标点击触发；
scroll	1.0	1	每次滚动个数。
vis	1.0	1	visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。	图解
prevCell	1.0	".prev"	前一个/页按钮对象。
nextCell	1.0	".next"	后一个/页按钮对象。
defaultIndex	1.0	0	默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从第2个开始执行
titOnClassName	1.0	"on"	当前titCell位置自动增加的class名称