JQuery图片无限循环滚动源码

最新推荐文章于 2021-11-24 14:10:25 发布
最新推荐文章于 2021-11-24 14:10:25 发布
阅读量178 收藏
点赞数
文章标签： php javascript git ViewUI
原文链接：http://www.cnblogs.com/piaopiaodi/p/5724787.html
版权

平常项目中经常用到图片循环滚动，所以就写些必要的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

weixin_30567225
关注
html网页图片滚动代码用css和div,DIV+CSS网页图片滚动源代码
weixin_36352025的博客
08-04 1639
DIV+CSS网页图片滚动源代码style="overflow:hidden;width:500px;">border="0">id="butong_net_left1" valign="top"align="center">border="0">src="src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片">sr...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
weixin_42680139的博客
05-31 1196
bxCarousel参数说明：move：每次滚动移动图片的数量，默认为4。display_num：展示图片的数量，默认为4。speed：图片滚动速度，默认为500毫秒。margin：图片间的间距，默认为0。auto：是否自动滚动，默认为false。auto_interval：当设为自动滚动时，每次滚动的时间间隔(毫秒)，默认为2000毫秒即2秒。auto_dir：自动滚动的方向，默认为next，你...
jquery-图片滚动源代码
01-15
jquery-图片滚动源代码：能实现图片的无限滚动。
图片滚动源码
橙序员凡星
02-28 856
图片滚动代码： 图片滚动 <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 100%; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 {
Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip
07-04
imgscroll插件是一款支持图片焦点滚动（支持渐变和滚动），图片连续无缝循环滚动的js库，依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
图片滑动源代码
01-23
图片滑动源代码，打开html文件就能展示，直接打开就可以哦
基于jQuery的图片左右无缝滚动插件
10-28
无缝滚动是一种常见的网页动态效果，通常用于图片展示，使得图片能够无限循环地进行左右滚动展示，就像传统的广告牌一样。这种效果可以吸引用户的注意，增加网站的动态感。 首先，我们注意到该插件基于jQuery库，这...
基于原生JS图片循环滚动特效源码.zip
11-21
这个"基于原生JS图片循环滚动特效源码.zip"文件提供了实现这一功能的纯JavaScript代码，无需依赖任何外部库如jQuery。以下是关于这个主题的详细知识讲解。 首先，原生JavaScript是Web开发的基础，它允许开发者直接...
jQuery实现的背景无限循环缩放动画特效源码.zip
11-07
《jQuery实现背景无限循环缩放动画特效解析》 在网页设计与开发中，动态效果的运用可以提升用户体验，增加网站的吸引力。其中，背景无限循环缩放动画是一种常见且有效的视觉设计手法。本文将深入探讨如何利用jQuery...
jQuery+Microfiche插件实现图片左右滚动特效源码.zip
11-17
这个插件支持无限循环、自定义分页导航、平滑滚动以及多种手势操作。在本项目中，Microfiche用于创建图片左右滚动的特效，用户可以通过点击或者使用键盘箭头键来浏览图片，增加了网站的互动性和视觉吸引力。 实现这...
jquery无限循环图片轮播代码
03-20
这是一个不错的jquery轮播的代码，可以下载下来看一下
jQuery横向图片焦点图滚动效果
02-16
30款 jQuery横向图片焦点图滚动效果
图片滚动预览
03-20
NULL 博文链接：https://happypigs.iteye.com/blog/799200
图片3D循环滚动-很炫-很亮效果（源码）
05-22
这是一款很炫的3D效果，图片循环滚动特效，可以用作程序所用，也可以自己玩，希望大家会喜欢!
超好用的同一页面多组图片单行滚动Jquery实现代码
12-19
jquery实现的同一页面，多组图片实现循环无缝滚动！有需要的可以参考！
直播系统源码，图片一直滚动，循环滚动，竖向和横向
云豹网络科技
11-24 407
直播系统源码，图片一直滚动，循环滚动，竖向和横向实现的相关代码 竖向： public class LoopScrollView extends View { private final int speed; private final Bitmap bitmap; private Rect clipBounds = new Rect(); private float offset = 0; private boolean isStarted; pu
jQuery异形滚动制作(含完整源码)
执念斩长河
06-02 655
本特效主要由对象封装写出，将每一个图片封装成数组，根据数组不断pop或者push操作，然后特效就非常炫酷了
jquery 无限循环滚动，文字图片皆可，IE6,7,8,FF8测试无误
huang100qi的专栏
08-29 6550
有人说原生js写的有兼容问题，我在网上查了查，此类型的代码有很多（高手还是很多的），但是写的太复杂，最近正好在看《锋利的jquery》，书中有这样的例子，书中的例子是新闻标题向上无缝滚动，我发现稍微一改就能向左，向右，向下滚动，而且可以很轻松的把文字换成图片，在此向作者表示感谢。 先上代码，本代码实现了图片向左无缝滚动，里边有注释讲如何实现向上滚动，需要阅读者有一点点css和jquery
图片滚动插件+html5,超赞的jQuery图片滑块动画特效代码汇总
weixin_28703489的博客
06-10 571
在网站开发过程中，特别是前端开发这块，经常会使用到很多图片滑块动画，也就是一些基于jQuery和HTML5的焦点图插件。本文将为大家收集10个超赞的jQuery图片滑块动画，这些现成的jQuery插件将为你节省很多开发时间，而且效果都还不错，一起来欣赏一下吧。1、jQuery+HTML5实现的超炫全屏焦点图效果源码这次我们要来分享一款非常绚丽的jQuery焦点图插件，同时这款焦点图也利用了HTML...
jQuery实现无限循环滚动
最新发布
05-30
可以使用jQuery的animate()方法和定时器实现无限循环滚动。具体步骤如下： 1. 将需要滚动的元素复制一份，并插入到元素列表的末尾，形成一个循环列表。 2. 使用定时器，每隔一定时间执行一次滚动动画。 3. 在滚动动画完成后，判断当前滚动到的位置是否是复制元素的位置，如果是，则立即将滚动位置重置到原始位置。 下面是一个简单的示例代码： HTML代码： ``` <div class="scroll-wrap"> <ul class="scroll-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> ``` CSS代码： ``` .scroll-wrap { overflow: hidden; } .scroll-list { width: 5000px; /* 滚动列表的总宽度，需要根据实际情况进行调整 */ position: relative; left: 0; margin: 0; padding: 0; list-style: none; } .scroll-list li { float: left; width: 200px; /* 每个元素的宽度，需要根据实际情况进行调整 */ height: 100px; /* 每个元素的高度，需要根据实际情况进行调整 */ text-align: center; line-height: 100px; font-size: 36px; background-color: #ccc; margin-right: 20px; /* 每个元素之间的间距，需要根据实际情况进行调整 */ } ``` JavaScript代码： ``` $(function() { var $scrollWrap = $('.scroll-wrap'); var $scrollList = $('.scroll-list'); var $scrollItems = $scrollList.find('li'); var scrollWidth = $scrollItems.eq(0).outerWidth() * $scrollItems.length; $scrollList.css({ width: scrollWidth }); // 将列表复制一份，并插入到末尾 $scrollList.append($scrollItems.clone()); // 定时器，每隔1秒执行一次滚动动画 setInterval(function() { $scrollList.animate({ left: '-=200px' }, 500, function() { // 判断是否滚动到了复制元素的位置 if ($scrollList.position().left <= -scrollWidth) { $scrollList.css({ left: 0 }); } }); }, 1000); }); ``` 在上面的代码中，我们通过计算滚动列表的总宽度，并将滚动元素复制一份，形成一个循环列表。然后使用定时器每隔一定时间执行一次滚动动画，滚动完成后判断是否到达复制元素的位置，如果是则重置滚动位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值