首页>组件>幻灯片

幻灯片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名称