关于轮播和滚动的控件介绍

Posted 2020-10-12 司徒海棠

一、左右自动滚动，带控制

<div class="rollpic cl"> 
　　<a href="javascript:void(0)" class="prev"></a>
 　　 <div class="rollpicshow">
    　　<ul>
      　　<li><img width="170" height="143" title="" src="temp/1.jpg"></li>
      　　<li><img width="170" height="143" title="" src="temp/2.jpg"></li>
      　　<li><img width="170" height="143" title="" src="temp/3.jpg"></li>
      　　<li><img width="170" height="143" title="" src="temp/4.jpg"></li>
      　　<li><img width="170" height="143" title="" src="temp/5.jpg"></li>
    　　</ul>
  　　</div>
   <a href="javascript:void(0)" class="next"></a>
</div>

首先，我们先搭好一个html框架

.rollpic .prev,.rollpic .next{display:block; height:38px; width:38px; cursor:pointer; float:left; background:url(../images/unslider-arrow2.png) no-repeat 0 0; margin-top:70px}
.rollpic .prev{background-position:0 0; margin-right:5px}
.rollpic .prev:hover{background-position:0 -38px}
.rollpic .next{background-position:0 -76px;margin-left:5px}
.rollpic .next:hover{background-position:0 -114px}
.rollpicshow{float:left; border:solid 1px #ddd}
.rollpicshow li{padding:10px}

然后渲染样式，但是很明显只有这样是不够的，所以现在就是我们的压轴主角了

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/jcarousellite.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".rollpicshow").jCarouselLite({
        auto: 2000, /*自动播放间隔时间*/
        speed: 500, /*速度*/
        btnNext:".next",/*向前滚动*/
        btnPrev:".prev",/*向后滚动*/
        visible:3 /*显示数量*/
    })});
</script>

重点就是要给大家介绍的是这个控件

jcarousellite.min.js
它依赖于jquery,所以在它之前需要加载jquery,好像网上有人说需要用到jquery-1.4.2.min.js以上版本，这个没有具体时间哈，因为本身常用的jquery已经是高版本了所以就没有进行低版本测试了。
兼容性还可以，市面常用高版本浏览器都可以兼容，本身代码不多，下面我就贴出来它的源码，有兴趣的小伙伴通过站长工具解压下来仔细研究。

(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,\'marginLeft\')+css(a,\'marginRight\')};function height(a){return a[0].offsetHeight+css(a,\'marginTop\')+css(a,\'marginBottom\')}})(jQuery);

View Code

 然后就来简单介绍一下常用的API吧

btnPrev     string 上一个按钮的class名, 比如  btnPrev: “.prev”
btnNext     string 下一个按钮的class名, 比如  btnPrev: “.prev”
btnGo       array  自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮：[".1", ".2"]
mouseWheel  bool   鼠标滑是否可以轮控制上下滚动,可选：false,true,默认false
auto        int    指定多少秒内容定期自动滚动。默认为空(null),是不滚动,如果设定的,单位为毫秒,如1秒为1000
speed       int    滑动的速度,可以尝试800 1000 1500,设置成0将删除效果
easing      string 缓冲效果名称,如：easing: “bounceout”,需要jquery中的easing pluin（缓冲插件实现）,只适用于jq1.2
vertical    bool   是否垂直滚动,可选：false,true,默认false
circular    bool   是否循环滚动,默认为true,如果为false,滚动到最后一个将停止滚动
visible     int    可见数量,可以为小数，如2.5为2.5个li
start       int    开始的地方,默认是0
scroll      int    每次滚动的li数量
beforeStart func   滚动开始时回调的函数,可以传入对象参数 beforeStart: function(a) { alert(“开始的对象是:” + a)}
afterEnd    func   滚动结束时回调的函数,使用方法同上

最后达到了效果，还是不错的。