无缝循环滚动类

html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图片</title>
<link type="text/css" rel="stylesheet" href="../../css/components.base.css" />
<script type="text/javascript" src="../../js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="../../js/Tween.js"></script>
<script type="text/javascript" src="../../js/components.scrollimg.js"></script>
</head>
<body>
	<div class="scroll_img">
    	<div class="scroll_img_title">
        	<h4>一周图片精选</h4>
        </div>
        <div class="scroll_img_content">
        	<div class="scroll_img_left_control">
            </div>
            <div class="scroll_img_main_content">
            	<div class="animate_layer">
                    <div class="inner_animate_layer">
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65684653.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片1</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65704701.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片2</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65735704.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片3</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65795420.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片4</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65801324.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片5</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65802776.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片6</a></li>
                        </ul>
                        <ul>
                            <li class="inner_animate_layer_img"><img src="../../img/65813297.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片7</a></li>
                        </ul>
                        <ul style="margin-right:0px;">
                            <li class="inner_animate_layer_img"><img src="../../img/65813398.jpg" /></li>
                            <li class="inner_animate_layer_title"><a href="#">滚动图片8</a></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="inner_animate_layer" id="inner_animate_layer_clone"></div>
                </div>
            </div>
            <div class="scroll_img_right_control">
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="scroll_news">
    	<div class="scroll_news_up_button"></div>
        <div class="scroll_news_content">
            <div class="scroll_news_content_inner">
              <ul class="scroll_news_list">
                  <li><a href="#">外交部:1名中国渔民在帕劳遭误击死亡25人被抓</a></li>
                  <li><a href="#">国家旅游局称未发布开放西沙群岛旅游信息</a></li>
                  <li><a href="#">个人信息保护将出台国标 明确使用后立即删除</a></li>
                  <li><a href="#">中建农三大银行未按要求公示收费项目及标准</a></li>
              </ul>
              <ul class="scroll_news_list" id="scroll_news_list_clone">
              </ul>
            </div>
        </div>
        <div class="scroll_news_down_button"></div>
        <div class="clear"></div>
    </div>
    <script language="javascript">
    	var img = new componentsSCrollImg(".animate_layer", ".inner_animate_layer", "#inner_animate_layer_clone", $(".inner_animate_layer:eq(0)").width() / 2, $(".animate_layer ul").length * 2, {
			speed:Tween.Elastic.easeInOut(120, 140, 150, 60, 190, 130),
			imgLength:8,
			everyChildWidth:$(".animate_layer div:first ul:first").outerWidth(true),
			everyImgLength:4,
			everyPageWidth:600,
			autoplay:true,
			control:true,
			leftControlButton:".scroll_img_left_control",
			rightControlButton:".scroll_img_right_control"
		});
		img.init();
		var img1 = new componentsSCrollImg(".scroll_news_content_inner", ".scroll_news_list", "#scroll_news_list_clone", $(".scroll_news_list li:eq(0)").height(), $(".scroll_news_list li").length * 2, {
			speed:Tween.Elastic.easeInOut(120, 140, 150, 60, 190, 130),
			imgLength:4,
			everyChildHeight:$(".scroll_news_list li:eq(0)").height(),
			everyImgLength:1,
			everyPageHeight:$(".scroll_news").height(),
			direction:2,
			autoplay:true,
			control:true,
			upControlButton:".scroll_news_up_button",
			downControlButton:".scroll_news_down_button"
		});
		img1.init();
    </script>
</body>
</html>

js代码:

/*
	components.scrollimg:无缝循环滚动类
	@版本:components.scrollimg_v1.0
	@作者:zhangyuanlj13@163.com
	@时间:2012-4-5
	@支持左右,上下循环滚动,可实现自动播放,按钮控制
	@具体使用方法见金互通前端组件库帮助文档.doc
*/
function componentsSCrollImg(animateObj, currentObj, cloneWrapObj, animateStep, childLength, option){
	var self = this;
	this.animateObj = animateObj;             //动画对象
	this.currentObj = currentObj;             //被复制的对象 
	this.cloneWrapObj = cloneWrapObj;         //用来转载复制对象的容器
	this.animateStep = animateStep;       //每次移动多少个像素
	this.stepLeft = animateStep;                    //向左移动了多少个像素
	this.stepTop = animateStep;                    //向上移动了多少个像素
	this.timer;                           //动画计时器
	this.cloneHtml = "";                  //存放复制的HTML
	this.animatedIsEnd = true;            //检测动画是否结束,此时不允许再点击鼠标滚动图片
	this.childLength = childLength;        //子节点长度,用于计算分屏
	this.page = 0;                        //图片可以分多少屏
	this.option = { 
		speed:900,       //动画速度
		delay:5000,      //函数调用延迟
		everyChildWidth:0,   //每个子元素的宽度
		everyChildHeight:0,   //每个子元素的高度
		imgLength:0,        //原图层有多少张图片
		everyImgLength:0,   //每一屏有多少张图片
		everyPageWidth:0, //每一屏的宽度
		everyPageHeight:0, //每一屏的高度
		direction:1,      //移动方向,1为左右,2为上下
		autoplay:true,    //是否允许自动播放
		control:false,    //是否有控制按钮
		leftControlButton:"",   //向后滚动按钮
		rightControlButton:"",   //向前滚动按钮
		upControlButton:"",   //向上滚动按钮
		downControlButton:""   //向下滚动按钮
	};
	if(typeof(option) == "object"){
		for(i in option){
			this.option[i] = option[i];
		}
	}
	$(this.cloneWrapObj).html($(this.currentObj).html());
	if(this.childLength % this.option.everyImgLength == 0){
		this.page = this.childLength / this.option.everyImgLength;
    }
	else{
		this.page = Math.ceil(this.childLength / this.option.everyImgLength);
	}
	//初始化滚动动画
	this.init = function(){
		//左右滚动
		if(this.option.direction == 1){
			if(this.option.autoplay){
				this.horizontalAutoPlay();
			}
			if(this.option.control){
				this.leftScroll();
				this.rightScroll();
			}
			this.clearTimer(this.animateObj, this.horizontalAutoPlay);
		}
		//上下滚动
		if(this.option.direction == 2){
			if(this.option.autoplay){
				this.verticalAutoPlay();
			}
			if(this.option.control){
				this.upScroll();
				this.downScroll();
			}
			this.clearTimer(this.animateObj, this.verticalAutoPlay);
		}
	}
	//水平滚动
	this.horizontalAutoPlay = function(){
		self.animatedIsEnd = false;
		if(0 - self.stepLeft == (self.page - 1) * self.option.everyPageWidth){
			self.stepLeft = 0 - (self.option.imgLength - self.option.everyImgLength) * self.option.everyChildWidth;
			$(self.animateObj).css("margin-left", self.stepLeft);
		}
		self.stepLeft -= self.animateStep;
		$(self.animateObj).animate({"margin-left":self.stepLeft}, self.option.speed, function(){
			self.animatedIsEnd = true;
		});
		self.timer = setTimeout(self.horizontalAutoPlay, self.option.delay);
	}
	//手动向左滚动
	this.leftScroll = function(){
		$(this.option.leftControlButton).live("mouseover", function(){
			clearTimeout(self.timer);
		}).live("click", function(){
			if(self.animatedIsEnd){
				self.animatedIsEnd = false;
				clearTimeout(self.timer);
				self.stepLeft = parseInt($(self.animateObj).css("margin-left"));
				if(0 - self.stepLeft == (self.page - 1) * self.option.everyPageWidth){
					self.stepLeft = 0 - (self.option.imgLength - self.option.everyImgLength) * self.option.everyChildWidth;
					$(self.animateObj).css("margin-left", self.stepLeft);
					$(self.animateObj).animate({"margin-left":self.stepLeft - self.animateStep}, self.option.speed, function(){
						self.animatedIsEnd = true;
					});
					return;
				}
				self.stepLeft -= self.animateStep; 
				$(self.animateObj).animate({"margin-left":self.stepLeft}, self.option.speed, function(){
					self.animatedIsEnd = true;
				});
			}
		}).live("mouseout", function(){
			if(self.option.autoplay){
				self.timer = setTimeout(self.horizontalAutoPlay, self.option.delay);
			}
			else{
				return;
			}
		});
	}
	//手动向右滚动
	this.rightScroll = function(){
		$(this.option.rightControlButton).live("mouseover", function(){
			clearTimeout(self.timer);
		}).live("click", function(){
			if(self.animatedIsEnd){
				self.animatedIsEnd = false;
				clearTimeout(self.timer);
				self.stepLeft = parseInt($(self.animateObj).css("margin-left"));
				if(self.stepLeft == 0){
					self.stepLeft = 0 - self.option.everyChildWidth * self.option.imgLength + self.animateStep;
					$(self.animateObj).css("margin-left", 0 - self.option.everyChildWidth * self.option.imgLength);
					$(self.animateObj).animate({"margin-left":self.stepLeft}, self.option.speed, function(){
						self.animatedIsEnd = true;
					});
					return;
				}
				self.stepLeft += self.animateStep;
				$(self.animateObj).animate({"margin-left":self.stepLeft}, self.option.speed, function(){
					self.animatedIsEnd = true;
				});
			}
		}).live("mouseout", function(){
			if(self.option.autoplay){
				self.timer = setTimeout(self.horizontalAutoPlay, self.option.delay);
			}
			else{
				return;
			}
		});
	}
	//垂直滚动
	this.verticalAutoPlay = function(){
		self.animatedIsEnd = false;
		if(0 - self.stepTop == (self.page - 1) * self.option.everyPageHeight){
			self.stepTop = 0 - (self.option.imgLength - self.option.everyImgLength) * self.option.everyChildHeight;
			$(self.animateObj).css("margin-top", self.stepTop);
		}
		self.stepTop -= self.animateStep;
		$(self.animateObj).animate({"margin-top":self.stepTop}, self.option.speed, function(){
			self.animatedIsEnd = true;
		});
		self.timer = setTimeout(self.verticalAutoPlay, self.option.delay);
	}
	//手动向上滚动
	this.upScroll = function(){
		$(this.option.upControlButton).live("mouseover", function(){
			clearTimeout(self.timer);
		}).live("click", function(){
			if(self.animatedIsEnd){
				self.animatedIsEnd = false;
				clearTimeout(self.timer);
				self.stepTop = parseInt($(self.animateObj).css("margin-top"));
				if(0 - self.stepTop == (self.page - 1) * self.option.everyPageHeight){
					self.stepTop = 0 - (self.option.imgLength - self.option.everyImgLength) * self.option.everyChildHeight;
					$(self.animateObj).css("margin-top", self.stepTop);
					$(self.animateObj).animate({"margin-top":self.stepTop - self.animateStep}, self.option.speed, function(){
						self.animatedIsEnd = true;
					});
					return;
				}
				self.stepTop -= self.animateStep; 
				$(self.animateObj).animate({"margin-top":self.stepTop}, self.option.speed, function(){
					self.animatedIsEnd = true;
				});
			}
		}).live("mouseout", function(){
			if(self.option.autoplay){
				self.timer = setTimeout(self.verticalAutoPlay, self.option.delay);
			}
			else{
				return;
			}
		});
	}
	//手动向下滚动
	this.downScroll = function(){
		$(this.option.downControlButton).live("mouseover", function(){
			clearTimeout(self.timer);
		}).live("click", function(){
			if(self.animatedIsEnd){
				self.animatedIsEnd = false;
				clearTimeout(self.timer);
				self.stepTop = parseInt($(self.animateObj).css("margin-top"));
				if(self.stepTop == 0){
					self.stepTop = 0 - self.option.everyChildHeight * self.option.imgLength + self.animateStep;
					$(self.animateObj).css("margin-top", 0 - self.option.everyChildHeight * self.option.imgLength);
					$(self.animateObj).animate({"margin-top":self.stepTop}, self.option.speed, function(){
						self.animatedIsEnd = true;
					});
					return;
				}
				self.stepTop += self.animateStep;
				$(self.animateObj).animate({"margin-top":self.stepTop}, self.option.speed, function(){
					self.animatedIsEnd = true;
				});
			}
		}).live("mouseout", function(){
			if(self.option.autoplay){
				self.timer = setTimeout(self.verticalAutoPlay, self.option.delay);
			}
			else{
				return;
			}
		});
	}
	//清除计时器
	this.clearTimer = function(obj, func){
		$(obj).live("mouseover", function(){
			clearTimeout(self.timer);
		}).live("mouseout", function(){
			if(self.option.autoplay){
				self.timer = setTimeout(func, self.option.delay);
			}
			else{
				return;
			}
		});
	}
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值