/** * @author Administrator * @version 0.96 */ (function ( $ ) { /*當前位置的計數 * */ var $mcount=0; /** * 父元素未加入元素时的宽度 */ var $width=0; /** * parentwo:是否在全屏时自动给父元素设置宽度,并且溢出隐藏 * parento:是否给父元素设置溢出隐藏 * autodots:是否自动添加点导航 */ $.fn.islider=function(options){ var settings = $.extend({ s:45, full:false, dots:false, autodots:false, dotsclass:'idot', nextclass:'inext', next:false, parento:false, parentw:false },options); $mcount=0; $this=this; if(settings.full){ $hwidth=parseInt($(window).width()); if(settings.parentw){ this.parent().width($hwidth); } }else{ $hwidth=parseInt(this.parent().width()); } $children=this.children(); $children.css('float','left'); $children.css('width',$hwidth); $size=$children.size(); $clone= $children.clone(); this.width($hwidth*$size*2+'px'); this.prepend($clone); $width=$hwidth*$size; $inter= setInterval(function(){ slider(); },settings.s); this.on('mouseover',function(){ clearInterval($inter); }); /** * 用於輪播的匿名函數 */ function slider (argument) { $marginleft=$this.css('margin-left'); $marginleft= parseInt($marginleft); $childh= parseInt($this.children().width()); $mcount=$marginleft%$childh; if(Math.abs($marginleft)>=$width){ $this.css('margin-left',"0px"); $marginleft=0; }else{ if(argument){ if($marginleft==0){ $marginleft=$hwidth-$width; }else{ $marginleft=$marginleft+$hwidth; } $this.animate({'margin-left':$marginleft+"px"}); }else{ $this.animate({'margin-left':$marginleft-$hwidth+"px"}); $marginleft=$marginleft-$hwidth; } } $mcount=$marginleft/$hwidth; isdot(); } this.on('mouseout',function(){ $inter=setInterval(function(){ slider(); },settings.s); }); /** * 判斷是否存在點導航 */ function isdot(){ if(settings.dots){ $olli.removeClass('active'); $olli.eq($mcount).addClass('active'); } } if(settings.dots){ /* *獲取點元素 * */ this.after('<ol class='+settings.dotsclass+'></ol>'); $nextol= this.next(); for (var i=0; i < $size; i++) { $nextol.append('<li></li>'); }; $olli= $nextol.children(); $ollisize=$olli.size(); $olli.on('click',function(){ $nextsize=$(this).nextAll().size(); $active=$ollisize- $nextsize; if($active===1){ $hwa=$hwidth*$size; }else{ $hwa=($nextsize+1)*$hwidth; } $this.animate({'margin-left':'-1'*$hwa+'px'}); $olli.removeClass('active'); $(this).addClass('active'); }); $nextol.on('mouseout',function(){ $inter=setInterval(function(){ slider(); },settings.s); }); $nextol.on('mouseover',function(){ clearInterval($inter); }); } /** * 上一頁和下一頁 */ if(settings.next){ $next2ol=$('.'+settings.nextclass); $next2olli=$next2ol.children(); $next2olli.on('click',function(){ $active2=$(this).nextAll().size(); if($active2==0){ slider(); }else{ slider(true); } }); $next2ol.on('mouseout',function(){ $inter=setInterval(function(){ slider(); },settings.s); }); $next2ol.on('mouseover',function(){ clearInterval($inter); }); } }; }( jQuery ));
写这个的原因是我的样式被插件弄得一团糟
所以你需要自己设置一些样式
/****
<ul class="islider">
<li>foo1<li/>
<li>foo2<li/>
<li>foo3<li/>
<li>foo4<li/>
</ul>
<script type="text/javascript">
$('.islider').islider();
</script>
*******/
s:45,///设置轮播速度 full:false,///是否全屏 dots:false,///是否显示点导航 dotsclass:'idot',///给点导航设置的样式类 nextclass:'inext',//// 上一页和下一页的样式类 next:false,////// 是否显示上一页和下一页,以及上一页和下一页的HTML标签要自己写