`
JavaSam
  • 浏览: 952162 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 图片滚动

 
阅读更多

			var sina = {
				$ : function(objName) {
					if (document.getElementById) {
						return eval('document.getElementById("' + objName + '")')
					} else {
						return eval('document.all.' + objName)
					}
				},
				isIE : navigator.appVersion.indexOf("MSIE") != -1 ? true : false,
				addEvent : function(l, i, I) {
					if (l.attachEvent) {
						l.attachEvent("on" + i, I)
					} else {
						l.addEventListener(i, I, false)
					}
				},
				delEvent : function(l, i, I) {
					if (l.detachEvent) {
						l.detachEvent("on" + i, I)
					} else {
						l.removeEventListener(i, I, false)
					}
				},
				readCookie : function(O) {
					var o = "", l = O + "=";
					if (document.cookie.length > 0) {
						var i = document.cookie.indexOf(l);
						if (i != -1) {
							i += l.length;
							var I = document.cookie.indexOf(";", i);
							if (I == -1)
								I = document.cookie.length;
							o = unescape(document.cookie.substring(i, I))
						}
					};
					return o
				},
				writeCookie : function(i, l, o, c) {
					var O = "", I = "";
					if (o != null) {
						O = new Date((new Date).getTime() + o * 3600000);
						O = "; expires=" + O.toGMTString()
					};
					if (c != null) {
						I = ";domain=" + c
					};
					document.cookie = i + "=" + escape(l) + O + I
				},
				readStyle : function(I, l) {
					if (I.style[l]) {
						return I.style[l]
					} else if (I.currentStyle) {
						return I.currentStyle[l]
					} else if (document.defaultView && document.defaultView.getComputedStyle) {
						var i = document.defaultView.getComputedStyle(I, null);
						return i.getPropertyValue(l)
					} else {
						return null
					}
				}
			};

			function ScrollPic(scrollContId, arrLeftId, arrRightId, dotListId) {
				this.scrollContId = scrollContId;
				this.arrLeftId = arrLeftId;
				this.arrRightId = arrRightId;
				this.dotListId = dotListId;
				this.dotClassName = "dotItem";
				this.dotOnClassName = "dotItemOn";
				this.dotObjArr = [];
				this.pageWidth = 0;
				this.frameWidth = 0;
				this.speed = 10;
				this.space = 10;
				this.pageIndex = 0;
				this.autoPlay = true;
				this.autoPlayTime = 5;
				var _autoTimeObj, _scrollTimeObj, _state = "ready";
				this.stripDiv = document.createElement("DIV");
				this.listDiv01 = document.createElement("DIV");
				this.listDiv02 = document.createElement("DIV");
				if (!ScrollPic.childs) {
					ScrollPic.childs = []
				};
				this.ID = ScrollPic.childs.length;
				ScrollPic.childs.push(this);
				this.initialize = function() {
					if (!this.scrollContId) {
						throw new Error("必须指定scrollContId.");
						return
					};
					this.scrollContDiv = sina.$(this.scrollContId);
					if (!this.scrollContDiv) {
						throw new Error("scrollContId不是正确的对象.(scrollContId = \"" + this.scrollContId + "\")");
						return
					};
					this.scrollContDiv.style.width = this.frameWidth + "px";
					this.scrollContDiv.style.overflow = "hidden";
					this.listDiv01.innerHTML = this.listDiv02.innerHTML = this.scrollContDiv.innerHTML;
					this.scrollContDiv.innerHTML = "";
					this.scrollContDiv.appendChild(this.stripDiv);
					this.stripDiv.appendChild(this.listDiv01);
					this.stripDiv.appendChild(this.listDiv02);
					this.stripDiv.style.overflow = "hidden";
					this.stripDiv.style.zoom = "1";
					this.stripDiv.style.width = "32766px";
					this.listDiv01.style.cssFloat = "left";
					this.listDiv02.style.cssFloat = "left";
					sina.addEvent(this.scrollContDiv, "mouseover", Function("ScrollPic.childs[" + this.ID + "].stop()"));
					sina.addEvent(this.scrollContDiv, "mouseout", Function("ScrollPic.childs[" + this.ID + "].play()"));
					if (this.arrLeftId) {
						this.arrLeftObj = sina.$(this.arrLeftId);
						if (this.arrLeftObj) {
							sina.addEvent(this.arrLeftObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].rightMouseDown()"));
							sina.addEvent(this.arrLeftObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"));
							sina.addEvent(this.arrLeftObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].rightEnd()"))
						}
					};
					if (this.arrRightId) {
						this.arrRightObj = sina.$(this.arrRightId);
						if (this.arrRightObj) {
							sina.addEvent(this.arrRightObj, "mousedown", Function("ScrollPic.childs[" + this.ID + "].leftMouseDown()"));
							sina.addEvent(this.arrRightObj, "mouseup", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"));
							sina.addEvent(this.arrRightObj, "mouseout", Function("ScrollPic.childs[" + this.ID + "].leftEnd()"))
						}
					};
					if (this.dotListId) {
						this.dotListObj = sina.$(this.dotListId);
						if (this.dotListObj) {
							var pages = Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4), i, tempObj;
							for ( i = 0; i < pages; i++) {
								tempObj = document.createElement("span");
								this.dotListObj.appendChild(tempObj);
								this.dotObjArr.push(tempObj);
								if (i == this.pageIndex) {
									tempObj.className = this.dotClassName
								} else {
									tempObj.className = this.dotOnClassName
								};
								tempObj.title = "第" + (i + 1) + "页";
								sina.addEvent(tempObj, "click", Function("ScrollPic.childs[" + this.ID + "].pageTo(" + i + ")"))
							}
						}
					};
					if (this.autoPlay) {
						this.play()
					}
				};
				this.leftMouseDown = function() {
					if (_state != "ready") {
						return
					};
					_state = "floating";
					_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveLeft()", this.speed)
				};
				this.rightMouseDown = function() {
					if (_state != "ready") {
						return
					};
					_state = "floating";
					_scrollTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].moveRight()", this.speed)
				};
				this.moveLeft = function() {
					if (this.scrollContDiv.scrollLeft + this.space >= this.listDiv01.scrollWidth) {
						this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + this.space - this.listDiv01.scrollWidth
					} else {
						this.scrollContDiv.scrollLeft += this.space
					};
					this.accountPageIndex()
				};
				this.moveRight = function() {
					if (this.scrollContDiv.scrollLeft - this.space <= 0) {
						this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - this.space
					} else {
						this.scrollContDiv.scrollLeft -= this.space
					};
					this.accountPageIndex()
				};
				this.leftEnd = function() {
					if (_state != "floating") {
						return
					};
					_state = "stoping";
					clearInterval(_scrollTimeObj);
					var fill = this.pageWidth - this.scrollContDiv.scrollLeft % this.pageWidth;
					this.move(fill)
				};
				this.rightEnd = function() {
					if (_state != "floating") {
						return
					};
					_state = "stoping";
					clearInterval(_scrollTimeObj);
					var fill = -this.scrollContDiv.scrollLeft % this.pageWidth;
					this.move(fill)
				};
				this.move = function(num, quick) {
					var thisMove = num / 5;
					if (!quick) {
						if (thisMove > this.space) {
							thisMove = this.space
						};
						if (thisMove < -this.space) {
							thisMove = -this.space
						}
					};
					if (Math.abs(thisMove) < 1 && thisMove != 0) {
						thisMove = thisMove >= 0 ? 1 : -1
					} else {
						thisMove = Math.round(thisMove)
					};
					var temp = this.scrollContDiv.scrollLeft + thisMove;
					if (thisMove > 0) {
						if (this.scrollContDiv.scrollLeft + thisMove >= this.listDiv01.scrollWidth) {
							this.scrollContDiv.scrollLeft = this.scrollContDiv.scrollLeft + thisMove - this.listDiv01.scrollWidth
						} else {
							this.scrollContDiv.scrollLeft += thisMove
						}
					} else {
						if (this.scrollContDiv.scrollLeft - thisMove <= 0) {
							this.scrollContDiv.scrollLeft = this.listDiv01.scrollWidth + this.scrollContDiv.scrollLeft - thisMove
						} else {
							this.scrollContDiv.scrollLeft += thisMove
						}
					};
					num -= thisMove;
					if (Math.abs(num) == 0) {
						_state = "ready";
						if (this.autoPlay) {
							this.play()
						};
						this.accountPageIndex();
						return
					} else {
						this.accountPageIndex();
						setTimeout("ScrollPic.childs[" + this.ID + "].move(" + num + "," + quick + ")", this.speed)
					}
				};
				this.next = function() {
					if (_state != "ready") {
						return
					};
					_state = "stoping";
					this.move(this.pageWidth, true)
				};
				this.play = function() {
					if (!this.autoPlay) {
						return
					};
					clearInterval(_autoTimeObj);
					_autoTimeObj = setInterval("ScrollPic.childs[" + this.ID + "].next()", this.autoPlayTime * 1000)
				};
				this.stop = function() {
					clearInterval(_autoTimeObj)
				};
				this.pageTo = function(num) {
					if (_state != "ready") {
						return
					};
					_state = "stoping";
					var fill = num * this.frameWidth - this.scrollContDiv.scrollLeft;
					this.move(fill, true)
				};
				this.accountPageIndex = function() {
					this.pageIndex = Math.round(this.scrollContDiv.scrollLeft / this.frameWidth);
					if (this.pageIndex > Math.round(this.listDiv01.offsetWidth / this.frameWidth + 0.4) - 1) {
						this.pageIndex = 0
					};
					var i;
					for ( i = 0; i < this.dotObjArr.length; i++) {
						if (i == this.pageIndex) {
							this.dotObjArr[i].className = this.dotClassName
						} else {
							this.dotObjArr[i].className = this.dotOnClassName
						}
					}
				
 
分享到:
评论

相关推荐

    JavaScript 图片滚动

    超酷的JavaScript图片横向滚动,Js滚动类已经封装,为了设置方便,单独摘出了控制程序。

    javascript图片滚动

    JavaScript图片滚动是一种常见的网页动态效果,它通过编程方式实现图片的自动切换,为网站增添视觉吸引力。这种技术在网页设计中被广泛应用,特别是在新闻、产品展示或者轮播图等场景下。JavaScript作为客户端脚本...

    超炫JavaScript图片滚动

    JavaScript图片滚动,也被称为图片轮播或滑动展示,是一种常见的网页动态效果,它通过JavaScript技术来实现图片的自动切换,以吸引用户注意力并提供视觉上的吸引力。这种效果在网站的首页、产品展示或者相册模块中...

    javascript图片滚动集合

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

    asp.net+javascript图片滚动播放源码

    "asp.net+javascript图片滚动播放源码"这个项目是基于这两者的结合,用于创建一个动态展示图片的滚动播放效果。在网页设计师联盟中,这样的源码通常会被分享和学习,以帮助开发者快速构建类似的功能。 要实现图片...

    JavaScript 图片滚动轮显(放大当前图片).zip

    实现JavaScript图片滚动轮显,主要涉及以下几个核心概念和方法: 1. **数组存储图片**:将需要展示的图片链接或者DOM元素存储在一个数组中,便于后续遍历和操作。 2. **计时器(setTimeout或setInterval)**:设置...

    javascript图片滚动的代码.doc

    JavaScript 图片滚动是一种常见的网页动态效果,用于展示一系列图片或标识。在网页设计中,它可以使页面更加生动吸引用户注意力。以下将详细解释这个代码的工作原理及其关键知识点: 1. **HTML 结构**: HTML 部分...

    JavaScript 图片滚动(绝对酷).rar

    JavaScript 图片滚动(绝对酷).rarJavaScript 图片滚动(绝对酷).rarJavaScript 图片滚动(绝对酷).rarJavaScript 图片滚动(绝对酷).rarJavaScript 图片滚动(绝对酷).rarJavaScript 图片滚动(绝对酷).rar

    阿里支付宝JavaScript图片滚动导航菜单

    在这个"阿里支付宝JavaScript图片滚动导航菜单"项目中,我们主要探讨的是如何使用JavaScript技术来创建一个具有动态效果、视觉吸引力且易于使用的图片滚动导航菜单。 首先,让我们了解导航菜单在网页设计中的作用。...

    滑动门式的JavaScript图片滚动类及实例包

    滑动门式JavaScript图片滚动是一种常见的网页动态效果,主要用于展示多张图片或内容,通过平滑的滚动动画来吸引用户的注意力。这种效果通常应用于产品展示、新闻轮播、广告横幅等场景。在这个实例包中,我们可以期待...

    javascript主题图片滚动

    JavaScript主题图片滚动是一种常见的网页动态效果,用于展示一组图片并以滑动或切换的方式呈现,为网站增添视觉吸引力。在互联网上,这种技术被广泛应用于网站的首页、产品展示、轮播广告等场景,以优雅地展示信息并...

    javascript图片滚动代码

    cxVzxvcxvxzcvcxzvcasdA wefcccccccccccccccccccccccccewcccccccccccccccc

    css+javascript图片滚动展示

    总结,本程序通过CSS和JavaScript的结合,创建了一个功能完善的图片滚动展示系统,不仅支持手动翻页,还能定时自动滚动,为用户提供了一种流畅、互动的浏览体验。开发者可以依据这些技术基础,根据实际需求进行定制...

    JavaScript实现图片连续滚动的案例

    在网页设计中,图片滚动效果是常见的增强用户体验的手段,它可以使页面更加生动,吸引用户的注意力。本案例将详细介绍如何使用JavaScript实现图片连续滚动,特别地,我们将关注“MarqueeScrollLeft”这个实现方法,...

    js图片滚动

    JavaScript 图片滚动是一种常见的...综上所述,JavaScript图片滚动是一个涉及DOM操作、定时器、事件处理、CSS动画和响应式设计等多个方面的问题。熟练掌握这些知识点,能够帮助开发者创建出更具吸引力和互动性的网页。

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

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

    JavaScript图片连续滚动效果

    JavaScript是一种广泛应用于网页和网络应用的编程语言...通过阅读和理解这些代码,你可以深入理解JavaScript图片滚动效果的实现原理,并将其应用到自己的项目中。在实践中不断探索和优化,能够让你的网页更加生动有趣。

Global site tag (gtag.js) - Google Analytics