當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

轮播插件

發布時間：2025/3/17 编程问答 9 豆豆

生活随笔收集整理的這篇文章主要介紹了轮播插件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

/*** @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

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

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

/****

?<li>foo1<li/>

?<li>foo2<li/>

?<li>foo3<li/>

?<li>foo4<li/>

</ul>

*******/

s:45,///設置輪播速度full:false,///是否全屏dots:false,///是否顯示點導航dotsclass:'idot',///給點導航設置的樣式類nextclass:'inext', 上一頁和下一頁的樣式類 next:false,// 是否顯示上一頁和下一頁,以及上一頁和下一頁的HTML標簽要自己寫

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

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

總結

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

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

插件