JavaScript 图片滚动,无缝滚动

最新推荐文章于 2024-08-19 10:14:30 发布

麻辣小布叮

最新推荐文章于 2024-08-19 10:14:30 发布

阅读量98

点赞数

分类专栏： javascript 文章标签：图片滚动无缝滚动

本文链接：https://blog.csdn.net/luobing_csdn/article/details/84612627

版权

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

[img]http://dl2.iteye.com/upload/attachment/0098/9880/88f6b969-91a1-379d-967c-0c01925c514e.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0098/8784/2d04d7b1-5099-31fa-a3d8-0ea44f720d74.jpg[/img]

//支持左右,滚动 ,上下滚动的话,同理, 修改 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();

});

对于常规的滚动, 有两种效果,第一种 带有 动画效果,一种没有动画效果(代码中注释的地方)