平常項目中經常用到圖片循環滾動，所以就寫些必要的CSS定位，JS基本算法，最后就封裝成JQuery圖片無限循環滾動插件類，其實本質上是li塊無限循環滾動，li塊里面不管是圖片還是其它內容，都OK的。

Git地址：?https://git.oschina.net/yongpiao555/plugslides.git

一、插件特點：

1.調用方便；

2.顯示靈活，可自定義是否定時滾動，滾動框大小，是否顯示“上一頁”和“下一頁”及顯示的位置，樣式易修改的等；

3.完全開源，可拿去修改后封裝用于商業用途，只需注明原創作者即可；

?

二、自夸的廢話不多說，直接說明使用方法，如下：

1.導入jquery類庫，這是必要的，plug.slides2.2.js就是封裝的滾動類。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="plug.slides2.2.js"></script>

?

2.以下圖片紅框部分就是滾動的內容，看到li塊了沒，一般li塊是動態的，寫死固定也行，隨便你啦，有多少個li塊，就會有多少個滾動圖片，（請注意：外層的div塊，ul塊和li塊class的值必須是slides，這個插件類需要用到）；

?

3.$("#advertisement").slides({"height":250,"width":1000,"speed":3});這是初始化的js代碼，很明顯，height和width是指高和寬，speed是指圖片滾動的速度，還有其它的參數，自己看插件類里的初始化參數，返回也不難看懂，我就不一一描述了，如下圖的藍圈部分；

?

三：顯示效果如下：

?

?

四.插件源代碼

/* * 幻燈片插件寫法 * Writer Zhangyp * CreateDate: 2014-11-19 * UpdateDate: 2015-12-09使用方法案例： <div id="advertisement" class="slides"><ul class="slides" style="height:{$list[0]['img_height']}px;overflow:hidden;"><volist name="list" id="vo"><li class="slides" style="background:{$vo.bgcolor};"><empty name="vo.url"><img src="/uploads/Link/{$vo.img_name}" alt="{$vo.title}"/><else/><a href="{$vo.url}" target="_blank" title="{$vo.title}"><img src="/uploads/Link/{$vo.img_name}" alt="{$vo.title}"/></a></empty></li></volist></ul> </div> <script type="text/javascript">$("#advertisement").slides();</script>注意：ul.slides必須的height和overflow兩個css屬性 */ (function ($) {var methods = {init:function(options){var settings = $.extend({'index':0,//默認顯示的下標'btnShow':true,//是否顯示左右按鈕'btnIndexShow':true,//是否顯示下標按鈕'autoScrool':true,//是否定時滾動'speed':'3',//定時滾動時間間隔(單位：秒)'height':'0'//高度(單位：像素)},options);return this.each(function(){var divObj=$(this);/*var liWidthStr=divObj.css("width");var liWidth=parseInt(liWidthStr.substr(0,liWidthStr.length-2));var liHightStr=divObj.children("ul.slides").css("height");var liHight=parseInt(liHightStr.substr(0,liHightStr.length-2));*/var liWidth=parseInt(settings.width);var liHight=parseInt(settings.height);var bodyW=parseInt(document.body.clientWidth);if(liWidth>bodyW){//liHight=liHight*bodyW/liWidth;liWidth=bodyW;}divObj.children("ul.slides").css({"height":liHight+"px"});var slides_nav_a='<img src="/Public/plugslides/slides_nav_a.png" style="border:0px;"/>';var slides_nav_a_cur='<img src="/Public/plugslides/slides_nav_a_cur.png" style="border:0px;"/>';var liLength=divObj.children("ul.slides").children("li.slides").length;divObj.append('<div class="slides_nav"></div>');for(var i=1;i<=liLength;i++){if(i==1){divObj.find("div.slides_nav").append("<a hidefocus='true'>"+slides_nav_a_cur+"</a>");}else{divObj.find("div.slides_nav").append("<a hidefocus='true'>"+slides_nav_a+"</a>");}}divObj.children("ul.slides").append(divObj.children("ul.slides").html());if(settings.btnShow){divObj.append('<a class="pre" title="pre" hidefocus="true"><i class="png"></i></a>');divObj.append('<a class="next" title="next" hidefocus="true"><i class="png"></i></a>');}divObj.css({"position":"relative","width":liWidth+"px","height":liHight+"px","overflow":"hidden","margin":"0px auto"});//art.dialog.tips(liWidth);divObj.children("ul.slides").css({"position":"absolute","left":"0px","width":liLength*liWidth*2+"px","height":liHight+"px","list-style-type":"none","margin":"0px","padding":"0px","overflow":"hidden"});divObj.children("ul.slides").children("li.slides").css({"float":"left","width":liWidth+"px","height":liHight+"px","overflow":"hidden","text-align":"center"});divObj.children("ul.slides").children("li.slides").children("a").css({"display":"block","overflow":"hidden","height":"100%","width":"100%"});//divObj.children("ul.slides").children("li.slides").children("img").css({"width":liWidth+"px"});//divObj.children("ul.slides").children("li.slides").css({"font-size":liHight/2+"px","line-height":liHight+"px"});//臨時調試用的divObj.children("div.slides_nav").css({"position":"absolute","bottom":"5px","text-align":"center","width":liWidth+"px"});divObj.children("div.slides_nav").children("a").css({"padding":"8px","cursor":"default"});divObj.children("a.pre").css({"display":"block","top":(liHight-60)/2+"px","position":"absolute","left":"15px","text-decoration":"none","font-weight":"bold","height":"60px","width":"30px","text-align":"center","line-height":"60px","-moz-opacity":"0.5","opacity":"0.5","filter":"alpha(opacity=50)","background":"#aeaeae","cursor":"pointer"});divObj.children("a.next").css({"display":"block","top":(liHight-60)/2+"px","position":"absolute","right":"15px","text-decoration":"none","font-weight":"bold","height":"60px","width":"30px","text-align":"center","line-height":"60px","-moz-opacity":"0.5","opacity":"0.5","filter":"alpha(opacity=50)","background":"#aeaeae","cursor":"pointer"});divObj.children("a.pre").children("i").css({"width":"21px","height":"32px","position":"absolute","left":"4.5px","top":"14px","background":"url(/Public/plugslides/slider_pre_next.png) no-repeat","background-position":"-72px -172px","overflow":"hidden"});divObj.children("a.next").children("i").css({"width":"21px","height":"32px","position":"absolute","left":"4.5px","top":"14px","background":"url(/Public/plugslides/slider_pre_next.png) no-repeat","background-position":"-42px -172px","overflow":"hidden"});var flag=true;var index=settings.index;divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});if(settings.btnIndexShow==false){divObj.find("div.slides_nav").hide();}divObj.children("ul.slides").css("left","-"+liWidth*index+"px");//上一張divObj.children("a.pre").bind("click",function(){if(!flag){return;}flag=false;index--;if(index<0){index=liLength-1;divObj.children("ul.slides").css("left","-"+liWidth*(index+1)+"px");}else{divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}var ulLeftStr=divObj.children("ul.slides").css("left");var ulLeft=parseInt(ulLeftStr.substr(0,ulLeftStr.length-2));divObj.children("ul.slides").animate({left:"-"+liWidth*index+"px"},500,function(){flag=true;});divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});});//下一張divObj.children("a.next").bind("click",function(){if(!flag){return;}flag=false;index++;if(index>=liLength){divObj.find("div.slides_nav").children("a").eq(0).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}else{divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}var ulLeftStr=divObj.children("ul.slides").css("left");var ulLeft=parseInt(ulLeftStr.substr(0,ulLeftStr.length-2));divObj.children("ul.slides").animate({left:"-"+liWidth*index+"px"},500,function(){if(index>=liLength){index=0;divObj.children("ul.slides").css("left","0px");}flag=true;});divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});});//鼠標點擊導航divObj.find("div.slides_nav").children("a").bind("mouseenter",function(e){if(!flag){return;}flag=false;index=$(this).index();divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);var ulLeftStr=divObj.children("ul.slides").css("left");var ulLeft=parseInt(ulLeftStr.substr(0,ulLeftStr.length-2));divObj.children("ul.slides").animate({left:"-"+liWidth*index+"px"},1,function(){flag=true;;});divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});});if(liLength==1){return;}var clearId=0;if(settings.autoScrool){clearId=setInterval(function(){if(!flag){return;}flag=false;index++;if(index>=liLength){divObj.find("div.slides_nav").children("a").eq(0).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}else{divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}var ulLeftStr=divObj.children("ul.slides").css("left");var ulLeft=parseInt(ulLeftStr.substr(0,ulLeftStr.length-2));divObj.children("ul.slides").animate({left:"-"+liWidth*index+"px"},500,function(){if(index>=liLength){index=0;divObj.children("ul.slides").css("left","0px");}flag=true;});divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});},settings.speed*1000);}divObj.bind("mouseenter",function(){clearInterval(clearId);});divObj.bind("mouseleave",function(){clearId=setInterval(function(){if(!flag){return;}flag=false;index++;if(index>=liLength){divObj.find("div.slides_nav").children("a").eq(0).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}else{divObj.find("div.slides_nav").children("a").eq(index).html(slides_nav_a_cur).siblings("a").html(slides_nav_a);}var ulLeftStr=divObj.children("ul.slides").css("left");var ulLeft=parseInt(ulLeftStr.substr(0,ulLeftStr.length-2));divObj.children("ul.slides").animate({left:"-"+liWidth*index+"px"},500,function(){if(index>=liLength){index=0;divObj.children("ul.slides").css("left","0px");}flag=true;});divObj.parent("div").css({"background-color":divObj.children("ul.slides").children("li.slides").eq(index).css("background-color")});},settings.speed*1000);});});},autoScrool:function(){//業務代碼}};$.fn.slides=function(method){// 方法調用if (methods[method]) {return methods[method].apply(this, Array.prototype.slice.call(arguments,1));}else if(typeof method === 'object' || !method) {return methods.init.apply(this, arguments);}else{alert('Method：' + method + ' does not exist on jQuery.slides');}} })(jQuery);

　　

五.這是我Thinkphp項目中調用的案例

{__NOLAYOUT__} <div id="advertisement" class="slides"><ul class="slides" style="overflow:hidden;"><volist name="list" id="vo"><li class="slides" style="background-color:{$vo.bgcolor};background-position:center;background-repeat:no-repeat;background-image:url(/uploads/Link/{$vo.img_name});height:{$vo.img_height}px"><notempty name="vo.url"><a href="{$vo.url}" target="_blank" title="{$vo.title}"></a></notempty></li></volist></ul> </div> <script type="text/javascript"> var img_height="{$list[0]['img_height']}"; var img_width="{$list[0]['img_width']}"; $("#advertisement").slides({"height":img_height,"width":img_width,"speed":3}); </script>

　　

轉載于:https://www.cnblogs.com/piaopiaodi/p/5724787.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JQuery图片无限循环滚动源码的全部內容，希望文章能夠幫你解決所遇到的問題。

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