/*** @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 )); View Code

?寫這個的原因是我的樣式被插件弄得一團糟

所以你需要自己設置一些樣式

?

/****

<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標簽要自己寫

轉載于:https://www.cnblogs.com/zuoxiaobing/p/3595648.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的轮播插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。