`
Luob.
  • 浏览: 1592520 次
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript 图片滚动,无缝滚动

阅读更多








//支持 左右,滚动 ,上下滚动的话,同理, 修改 margin-left 为 margin-top
//支持  鼠标摸上去 悬停   移开继续滚动
//支持  左右单机按钮 单步定向滚动
//注意 对于常规的滚动,
有两种效果,第一种 带有 动画效果,一种没有动画效果(代码中注释的地方) 
var bjscroll={
			parendId:"", 			//ul
			childClassName:"",		//子元素的类样式
			pageUnit:1,				//轮换可视区域宽  最小  子元素单位
			viewWidth:0,			//可视区域宽
			viewHeight:0,			//可视区域高
			hasBtn:false, 			//是否有左右单机按钮
			showNum:false,			//是否显示数字 	1/5    4/5 
			seamlessScroll:false,	//是否采用无缝滚动
			hoverStop:true,			//获得焦点后是否停止 当前的滚动
			timeInterval:2500, 		//切换显示的时间
			scrollWay:"right",
			leftBtnId:"",  			//左边和右边的按钮id
			rightBtnId:"",
			leftNumId:"",			//显示 页面数字的id  1/5
			rightNumId:"",   		
			leftNum:"",				
			rightNum:"",
			leftNumEle:"",
			rightNumEle:"",
			currentPage:1,  		//默认显示的第一个
			totPage:10,			//最大索引值
			maxLength:10, 			//子元素的个数
			timer:"",				//计时器
			btnclick:0,				//控制单击
			init:function(){
				//计算最大索引
				if(bjscroll.childClassName!=null && bjscroll.childClassName.length>0){
					bjscroll.maxLength=$("."+bjscroll.childClassName).length;
				}else{
					bjscroll.maxLength=document.getElementById(bjscroll.parendId).children.length;
				}
				if(bjscroll.pageUnit <= 1){
					bjscroll.pageUnit=1;
				}else if(bjscroll.pageUnit >= bjscroll.maxLength){
					bjscroll.pageUnit=bjscroll.maxLength;
				}
				bjscroll.totPage=parseInt((bjscroll.maxLength+bjscroll.pageUnit-1)/bjscroll.pageUnit);
				
				//有显示数字分页的地方 
				if(bjscroll.showNum){
					bjscroll.leftNum=1;
					bjscroll.rightNum=bjscroll.totPage-1;
					
					bjscroll.leftNumEle=$("#"+bjscroll.leftNumId);
					bjscroll.rightNumEle=$("#"+bjscroll.rightNumId);
				}
				
				//给btn绑定事件
				bjscroll.bindBtnClick();
				
				//控制可视区域 鼠标 hover 事件
				if(bjscroll.hoverStop){
					$("#"+bjscroll.parendId).hover(function(){window.clearInterval(bjscroll.timer);},bjscroll.startRotation);//鼠标放在最大牌上的时候停止自动按时切换最大牌 离开鼠标复原
				}
				//启动计时器
				bjscroll.startRotation();
			},
			startRotation:function(){  //自动轮换
				window.clearInterval(bjscroll.timer);
				if(bjscroll.seamlessScroll){
					bjscroll.timer=window.setInterval("bjscroll."+bjscroll.scrollWay+"SeamlessScroll()",bjscroll.timeInterval);
				}else{
					bjscroll.timer=window.setInterval("bjscroll."+bjscroll.scrollWay+"Scroll()",bjscroll.timeInterval);
				}
				//alert(bjscroll.timer);
			},
			bindBtnClick:function(){ 
				//有所有箭头 
				if(bjscroll.hasBtn){
					var leftBtn=$("#"+bjscroll.leftBtnId);
					var rightBtn=$("#"+bjscroll.rightBtnId);
					if(bjscroll.seamlessScroll){
						$(leftBtn).click(function(){
							if(bjscroll.btnclick==0){
								bjscroll.btnclick=1;
								//$(this).attr("disabled",true);
								window.clearInterval(bjscroll.timer);
								bjscroll.leftSeamlessScroll();
							}
						}).mouseout(bjscroll.startRotation);
						
						$(rightBtn).click(function(){
							if(bjscroll.btnclick==0){
								bjscroll.btnclick=1;
								//$(this).attr("disabled",true);
								window.clearInterval(bjscroll.timer);
								bjscroll.rightSeamlessScroll();
								//rightBtn.disabled=false;
							}
						}).mouseout(bjscroll.startRotation);
					}else{
						$(leftBtn).click(function(){
							if(bjscroll.btnclick==0){
								bjscroll.btnclick=1;
								//$(this).attr("disabled",false);
								window.clearInterval(bjscroll.timer);
								bjscroll.leftScroll();
							}
						}).mouseout(bjscroll.startRotation);
						$(rightBtn).click(function(){
							if(bjscroll.btnclick==0){
								bjscroll.btnclick=1;
								//$(this).attr("disabled",false);
								window.clearInterval(bjscroll.timer);
								bjscroll.rightScroll();
								//rightBtn.disabled=false;
							}
						}).mouseout(bjscroll.startRotation);
					}
				}
			},
			leftSeamlessScroll:function(){  //无缝 左边滚动  注意clone尾和头
				if(bjscroll.currentPage<=1){
					$("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",-bjscroll.viewWidth*(bjscroll.totPage-1)+"px");
				}
				$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftSeamlessScrollCallBack);
			}, 
			rightSeamlessScroll:function(){ //无缝   右边滚动   3  1  2   3  1 
				$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightSeamlessScrollCallBack);
			},
			leftSeamlessScrollCallBack:function(){
				if(bjscroll.currentPage<=1){ //接下来显示最后一个
					bjscroll.currentPage=bjscroll.totPage;
				}
				bjscroll.currentPage--;
				bjscroll.calcIndex();
			},
			rightSeamlessScrollCallBack:function(){
				bjscroll.currentPage++;
				if(bjscroll.currentPage>=bjscroll.totPage){
					bjscroll.currentPage=1;
					$("#"+bjscroll.parendId).css("marginLeft",0+"px");
				}
				bjscroll.calcIndex();
			},
			leftScroll:function(){  //常规左滚动
				if(bjscroll.currentPage<=1){  //接下来要显示最后一个
					//$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth*(bjscroll.totPage-1)+"px"},bjscroll.leftScrollCallBack);
					$("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",-bjscroll.viewWidth*bjscroll.totPage+"px");
				}else{
					//$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftScrollCallBack);
				}
				$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth+"px"},bjscroll.leftScrollCallBack);
			},
			rightScroll:function(){ //常规右滚动
				if(bjscroll.currentPage>=bjscroll.totPage){ //接下来要显示第一个
					//$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"+="+bjscroll.viewWidth*(bjscroll.totPage-1)+"px"},bjscroll.rightScrollCallBack);
					$("#"+bjscroll.parendId+":not(:animated)").css("marginLeft",bjscroll.viewWidth+"px");
				}else{
					//$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightScrollCallBack);
				}
				$("#"+bjscroll.parendId+":not(:animated)").animate({marginLeft:"-="+bjscroll.viewWidth+"px"},bjscroll.rightScrollCallBack);
			},
			leftScrollCallBack:function(){
				if(bjscroll.currentPage<=1){
					bjscroll.currentPage=bjscroll.totPage;
				}else{
					bjscroll.currentPage--;
				}
				bjscroll.calcIndex();
			},
			rightScrollCallBack:function(){
				if(bjscroll.currentPage>=bjscroll.totPage){
					bjscroll.currentPage=1;
				}else{
					bjscroll.currentPage++;
				}
				bjscroll.calcIndex();
			},
			calcIndex:function(){
				bjscroll.leftNum=bjscroll.currentPage;
				bjscroll.rightNum=bjscroll.totPage-bjscroll.leftNum;
				if(bjscroll.hasBtn && bjscroll.btnclick==1){
					bjscroll.btnclick=0;
				}
				if(bjscroll.showNum){
					bjscroll.showNumFun();
				}
			},
			showNumFun:function(){  //显示轮换页数
				$(bjscroll.leftNumEle).text(bjscroll.leftNum+"/"+bjscroll.totPage);
				$(bjscroll.rightNumEle).text(bjscroll.rightNum+"/"+bjscroll.totPage);
			},
			clearRotation:function(){
				window.clearInterval(bjscroll.timer);
			}
			
	}




例子:
<div style="width:9999px" id="rotationparent">
<div></div>
<div></div>
...
</div>
或者 是 ul li


然后在窗体加载事件里面写 


$(function(){
//gundong
			 	bjscroll.parendId="rotationparent";
				bjscroll.viewWidth=840;
				bjscroll.pageUnit=3;
				bjscroll.scrollWay="right";
				bjscroll.leftBtnId="leftBtn";
				bjscroll.rightBtnId="rightBtn";
				bjscroll.childClassName="gund .prod";
				bjscroll.hasBtn=true;
				bjscroll.init();

});

对于常规的滚动, 有两种效果,第一种 带有 动画效果,一种没有动画效果(代码中注释的地方)
  • 大小: 255.8 KB
  • 大小: 246.6 KB
分享到:
评论
3 楼 lengzl 2014-07-09  
这么长的代码,你是怎样构思,又是怎样写出来的?
真的很佩服!
2 楼 Luob. 2014-07-08  
chenzheng8975 写道
哈哈 楼主好久没动态啊

忙啊
1 楼 chenzheng8975 2014-07-08  
哈哈 楼主好久没动态啊

相关推荐

    javascript上下无缝图片滚动

    JavaScript 上下无缝图片滚动是一种常见的网页动态效果,用于展示一系列图片,给用户带来更丰富的视觉体验。这种技术常被应用于产品展示、轮播广告或图片画廊等场景,如糯米网的产品展示。在这个效果中,图片会按照...

    JavaScript图片无缝滚动

    JavaScript 图片无缝滚动源码 图片无缝滚动源码

    js图片左右无缝滚动用鼠标控制图片滚动

    JavaScript图片左右无缝滚动是一种常见的网页动态效果,常用于展示多张图片并使用户可以通过鼠标操作来浏览。这种技术主要依赖JavaScript语言以及HTML和CSS来实现。以下是对这一知识点的详细说明: 1. **JavaScript...

    js原生图片上下无缝滚动

    原生JavaScript实现图片无缝滚动,主要涉及以下几个步骤: 1. **HTML 结构**:创建一个包含所有图片的`&lt;div&gt;`容器,每张图片作为`&lt;img&gt;`元素放入其中。 ```html ... ``` 2. **CSS 样式**:设置容器的`...

    DIV+CSS实现横向无缝图片滚动效果

    接下来,我们可能还需要一个JavaScript(或jQuery)脚本来实现无缝滚动。主要步骤包括: 1. **获取图片列表**:找到所有的图片元素,并记录其宽度。 2. **计算总宽度**:将所有图片宽度相加,再加上适当的间隙,...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    JavaScript 图片滚动插件是一种广泛应用于网页设计中的动态效果工具,它使得图片展示更加生动有趣。在网页设计中,图片滚动通常用于展示多张图片,尤其是对于产品展示、新闻更新或者图片滑块等场景,能有效提升用户...

    javascript+div图片无缝滚动

    ### JavaScript + div 图片无缝滚动知识点解析 #### 一、技术背景与应用场景 在Web开发领域,使用JavaScript结合HTML和CSS实现动态效果是常见的做法。其中,“图片无缝滚动”是一种非常实用的技术,常用于网站轮播...

    javascript无缝滚动代码

    在探讨“javascript无缝滚动代码”的知识点时,我们主要聚焦于如何通过JavaScript和HTML结合,实现图片的无缝滚动效果。此技术常用于网站设计中的轮播图、广告位或信息流等场景,能够提升用户体验,使页面更加生动...

    javascript图片滚动集合

    以上是关于JavaScript图片滚动的基本实现和扩展功能的介绍。在实际项目中,可以结合CSS3的动画属性,如`translateX`和`translateY`,以及现代浏览器的`requestAnimationFrame`来优化滚动性能和动画平滑度。同时,...

    无缝图片滚动效果,基于IE6,好看使用的

    这个文件可能包含了实现无缝滚动的JavaScript代码,包括定义滚动速度、动画效果、事件监听等功能。开发者可以通过引入这个文件到HTML页面,并配置相关参数来启用图片滚动效果。 在实际应用中,创建无缝图片滚动效果...

    图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向

    标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解: 1. **JavaScript基础**:无缝滚动效果主要依赖...

    无缝图片滚动效果

    在实现无缝图片滚动时,开发者通常会使用JavaScript库,如jQuery,来处理事件和动画效果。jQuery是一个轻量级、高性能的JavaScript库,提供了丰富的API供开发者使用。在这个例子中,"jquery-gd"可能是一个基于jQuery...

    marquee图片无缝滚动(上下左右均可)

    "marquee图片无缝滚动(上下左右均可)" 这个标题涉及到一个JavaScript或HTML元素的使用,即`&lt;marquee&gt;`标签,它用于创建一个滚动的效果,通常用于文字或图像的自动滚动。这里的关键词是“无缝滚动”,意味着在滚动...

    无缝滚动制作js文字无缝滚动和js图片无缝滚动

    本文将深入探讨如何使用JavaScript来实现文字和图片的无缝滚动效果,以及如何通过复制和应用提供的js代码来创建这些效果。 无缝滚动技术的主要目标是让页面内容(无论是文字还是图片)在不中断视觉连续性的情况下...

    一个非常简单易用的javascript图片无缝滚动

    JavaScript图片无缝滚动是一种常见的网页动态效果,用于展示一组图片或内容,通过自动循环滚动的方式,为用户带来流畅的视觉体验。这种技术广泛应用于网站的广告轮播、产品展示等场景。下面将详细介绍JavaScript图片...

    html中图片无缝滚动

    在图片无缝滚动中,JavaScript主要负责处理时间间隔、图片切换逻辑和事件监听。例如,可以使用`setInterval`函数每隔一定时间自动切换图片,或者通过`addEventListener`监听用户的鼠标悬停和点击事件,实现手动控制...

    web-JQuery无缝图片滚动

    2. **无缝滚动**:无缝滚动是网页设计中的一种效果,使得内容(如图片)在滚动时没有明显的断点,仿佛一直在平滑移动。这种效果可以增加用户体验,尤其在展示产品或信息时更为吸引人。 3. **实现方法**:使用jQuery...

    jquery图片无缝滚动代码左右上下无缝滚动图片

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

Global site tag (gtag.js) - Google Analytics