JQuery图片无限循环滚动源码

平常项目中经常用到图片循环滚动，所以就写些必要的CSS定位，JS基本算法，最后就封装成JQuery图片无限循环滚动插件类，其实本质上是li块无限循环滚动，li块里面不管是图片还是其它内容，都OK的。

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

一、插件特点：

1.调用方便；

2.显示灵活，可自定义是否定时滚动，滚动框大小，是否显示“上一页”和“下一页”及显示的位置，样式易修改的等；

3.完全开源，可拿去修改后封装用于商业用途，只需注明原创作者即可；

二、自夸的废话不多说，直接说明使用方法，如下：

1.导入jquery类库，这是必要的，plug.slides2.2.js就是封装的滚动类。

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

JQuery图片无限循环滚动源码相关推荐

封装一个ViewPager真正的实现图片无限循环滚动带导航点
效果图: 大家在写项目的过程中常常会碰到须要实现Viewpager里面载入几张图片来循环自己主动轮播的效果,假设不封装一下的话代码分散在activity里面会显得非常乱.并且也不利于我们下次复用,所以 ...
jquery实现无限循环滚动
复制下面代码查看效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
带后台管理的超酷jquery+ajax幻灯相册php源码,仿门户网图片频道的jQuery幻灯相册轮播代码...
推荐 jquery画廊特效支持缩略图预览和全屏展示及图片描述这是款基于jquery的画廊相册特效,功能较全面,可支持缩略小图预览,幻灯图片全屏展示,可显示多种规格的图片,包括全屏显示高清大图,以及 ...
文字/图片向上无限循环滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
[jQuery基础] jQuery动效案例(二) -- 图标特效、无限循环滚动(简易轮播图)
图标特效实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } ul{list-style: none;width: 400px;height ...
CSS实现图片无限循环无缝滚动
实现代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...

JQuery图片无限循环滚动源码

JQuery图片无限循环滚动源码相关推荐

最新文章

热门文章