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; } }); } }
无缝循环滚动类
最新推荐文章于 2024-08-24 00:57:01 发布