打印

分享一个功能－－轮换

本主题由 System 于 2009-11-29 05:00 解除限时高亮

wfzong [楼主]

新手上路

认证
帖子: 10
体力: 26
威望: 0
当前: 北京朝阳区

1^# 大中小发表于 2009-11-7 11:28

有需要的同学可以拿过去用，
对于使用方法和参考有疑问的朋友也可以这里问～

<!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=gb2312" />
<title>test</title>
<script type="text/javascript" src="http://www.ceconline.com/script/prototype-1.6.0.2.js"></script>
<script type="text/javascript">
var Interval = {}
Interval.init = function(obj){
	//元素个数、宽度、父元素
	obj.eleNum = $(obj.ele).childElements().length;
	obj.eleWidth = $(obj.ele).childElements()[0].getWidth();
	obj.father = $(obj.ele).parentNode;
	
	//alert($(obj.ele).childElements()[0].getWidth());
	
	//复制现有元素
	$(obj.ele).insert($(obj.ele).innerHTML);
	
	//当前元素索引号
	if(obj.goLeft){
		obj.currentNum = 0;
	} else {
		obj.currentNum = obj.eleNum;
		obj.father.scrollLeft = obj.eleNum*(obj.eleWidth + obj.marginLeft);
	}
	
	
	$(obj.ele).onmouseover = new Function("Interval.pause("+obj.objName+");");
	$(obj.ele).onmouseout = new Function("Interval.auto("+obj.objName+");");
	$(obj.leftPointer).onclick = new Function("Interval.gotoLeft("+obj.objName+");");
	$(obj.rightPointer).onclick = new Function("Interval.gotoRight("+obj.objName+");");
	
	Interval.auto(obj);
}
Interval.pause = function(obj){
	clearInterval(obj.autoScroller);
} 
Interval.gotoLeft = function(obj){
	clearInterval(obj.autoScroller);
	//alert(obj.currentNum);
	if(!obj.goLeft){
		obj.goLeft = true;
		//obj.currentNum = obj.eleNum - obj.currentNum;         
		if (obj.currentNum === obj.eleNum) {
			obj.currentNum = obj.eleNum-obj.currentNum;
			obj.father.scrollLeft = obj.father.scrollLeft - obj.eleNum*(obj.eleWidth + obj.marginLeft);
		}
	} 
	clearInterval(obj.sonScrollInterval);
	Interval.change(obj,obj.currentNum+1);
	Interval.auto(obj);
}
Interval.gotoRight = function(obj){ 
	clearInterval(obj.autoScroller);
	//alert(obj.currentNum);
	if(obj.goLeft){
		obj.goLeft = false;
		//obj.currentNum = obj.eleNum - obj.currentNum;
		if (obj.currentNum === 0) {		
			obj.currentNum = obj.eleNum-obj.currentNum;
			//alert(obj.father.scrollLeft); 
			obj.father.scrollLeft = obj.eleNum*(obj.eleWidth + obj.marginLeft);
		}       
		//obj.father.scrollLeft = obj.father.scrollLeft - obj.eleNum*(obj.eleWidth + obj.marginLeft);
	}
	
	clearInterval(obj.sonScrollInterval);
	Interval.change(obj,obj.currentNum-1);
	Interval.auto(obj);
}
Interval.auto = function(obj){
	clearInterval(obj.autoScroller);
	obj.autoScroller = setInterval(function(){
		$("cn").innerHTML=obj.currentNum;
		if(obj.goLeft){
			Interval.change(obj,obj.currentNum+1);
		} else {
			Interval.change(obj,obj.currentNum-1);
		}
	},obj.intervalTime);
}
Interval.change = function(obj,index){
	if(index==obj.currentNum){
		return;
	}
		var count=0;
		var duration=30;
		
		var begin_value = obj.father.scrollLeft;
		//alert(begin_value);
		var eleWidth = obj.eleWidth + obj.marginLeft;
		var spanNum = index-obj.currentNum;
		var chang_in_value=spanNum*eleWidth+(obj.currentNum*eleWidth-begin_value);
		//var chang_in_value=spanNum*eleWidth;
 
			//temp variable
			$("showNum").innerHTML = begin_value+"#"+chang_in_value;
			//$("showNum").innerHTML = obj.currentNum*eleWidth-begin_value;
		
		obj.sonScrollInterval=setInterval(function(){doit(begin_value,chang_in_value)},10);
		function doit(b,c){
			obj.father.scrollLeft=cpu(count,b,c,duration);
			count++;
			if(count==duration){
				clearInterval(obj.sonScrollInterval);
				sonScrollInterval=0;
				count=0;
				if(obj.goLeft){
					if (obj.currentNum === obj.eleNum-1) {
						obj.father.scrollLeft=0;
						obj.currentNum=0;
					} else {
						obj.father.scrollLeft=b+c;
						obj.currentNum=index;
					}
				} else {
					if (obj.currentNum === 1) {						
						obj.currentNum = obj.eleNum;
						obj.father.scrollLeft = obj.eleNum*(obj.eleWidth + obj.marginLeft);
					} else {
						obj.father.scrollLeft=b+c;
						obj.currentNum=index;
					}
				}
				
			}
		}
		function cpu(t,b,c,d) {return c*((t=t/d-1)*t*t+1)+b;};
/*
	$(obj.ele).innerHTML = parseInt($(obj.ele).innerHTML)+1;
*/
}
</script>
</head>
<body>
<style type="text/css">
.slider {
	margin:0;
	padding:0;
	width:480px;
	height:120px;	
	clear:both;
}
.slider li {
	list-style:none;
	float:left;
}
.frame {	width:400px; 	height:120px; 	background-color:#CCC;	overflow:hidden;}
.list {	width:8000px; height:120px;	list-style:none;	padding:0;	margin:0;}
.list li {	float:left;	width:120px;	height:100px;	margin-top:10px;	margin-left:10px;	background-color:#888; display:inline;}
.pointer {
	width:20px;
	height:120px;
	background-color:#F00;
	overflow:hidden;
	cursor:pointer;
}
</style>
<p id="showNum">
	null
</p>
<p>
	currentNum:<span id="cn">null</span>
</p>
<ul class="slider">
	<li id="listOne_left" class="pointer">左</li>
	<li id="frame" class="frame">
		<ul id="listOne" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</li>
	<li id="listOne_right" class="pointer">右</li>
</ul>
<br /><hr /><br />
<ul class="slider">
	<li id="listTwo_left" class="pointer">左</li>
	<li id="frame" class="frame">
		<ul id="listTwo" class="list">
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
		</ul>
	</li>
	<li id="listTwo_right" class="pointer">右</li>
</ul>
<br /><hr /><br />
<ul class="slider">
	<li id="listThree_left" class="pointer">左</li>
	<li id="frame" class="frame">
		<ul id="listThree" class="list">
			<li>aaa</li>
			<li>bbb</li>
			<li>ccc</li>
			<li>ddd</li>
			<li>eee</li>
		</ul>
	</li>
	<li id="listThree_right" class="pointer">右</li>
</ul>
<script type="text/javascript">
var listOne = {
	ele:"listOne",
	leftPointer:"listOne_left",
	rightPointer:"listOne_right",
	marginLeft:10,
	intervalTime:1500, 
	goLeft:false,
	objName:"listOne"
}
var listTwo = {
	ele:"listTwo",
	leftPointer:"listTwo_left",
	rightPointer:"listTwo_right",
	marginLeft:10,
	intervalTime:2000,
	goLeft:true,
	objName:"listTwo"
}
var listThree = {
	ele:"listThree",
	leftPointer:"listThree_left",
	rightPointer:"listThree_right",
	marginLeft:10,
	intervalTime:500000,
	goLeft:true,
	objName:"listThree"
}
Interval.init(listOne);
Interval.init(listTwo);
Interval.init(listThree);
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

点击＂运行代码＂后需刷新页面才能看到效果，具体是什么原因导致的我也不清楚，
可能是在第一次执行的时候，获取元素的动作想要获取的是这个帖子中的元素而不是当前页面，所以导致这个错误～

[ 本帖最后由 wfzong 于 2009-11-7 11:45 编辑 ]

TOP

西部数码分布式集群主机傲视群雄 | 韩国主机，快速稳定免备案，讯网科技

chong6

银牌会员

帖子: 680
体力: 1461
威望: 0
离线: 45 天

2^# 大中小发表于 2009-11-7 19:17

确实奇怪，得刷新一次才可以！
可能是JS加载问题！

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

cloudgamer

天空里的一片云

版主

帖子: 3782
体力: 7752
威望: 76
当前: 广东佛山

3^# 大中小发表于 2009-11-12 19:02

外链了js就要刷新了

技术blog

图片预览图片切换

TOP

国际动画人才海外高薪就业

4769946

VS剑心

中级会员

认证
帖子: 173
体力: 355
威望: 0
当前: 广东广州

专长 前端制作,JS,PHP

4^# 大中小发表于 2009-11-13 09:17

很不错的效果只是要刷新就。。。

人在江湖飘

TOP

明天教室职业插画师培训计划

wfzong [楼主]

新手上路

认证
帖子: 10
体力: 26
威望: 0
当前: 北京朝阳区

5^# 大中小发表于 2009-11-13 17:40

引用:

原帖由 cloudgamer 于 2009-11-12 19:02 发表
外链了js就要刷新了

版主知道为什么在Firefox里就不用刷新吗？

TOP

hanshanxue

新手上路

认证
帖子: 13
体力: 37
威望: 0
当前: 浙江宁波
离线: 34 天

6^# 大中小发表于 2009-11-13 22:19

外链的js代码有123kb这么大

请问为什么还要这个外链呢

TOP

fanfu

新手上路

认证
帖子: 1
体力: 7
威望: 0
当前: 上海浦东
离线: 32 天

7^# 大中小发表于 2009-11-13 22:42

还是在http://www.ceconline.com/script/prototype-1.6.0.2.js
里找感觉！

TOP

wfzong [楼主]

新手上路

认证
帖子: 10
体力: 26
威望: 0
当前: 北京朝阳区

8^# 大中小发表于 2009-11-13 23:59

引用:

原帖由 fanfu 于 2009-11-13 22:42 发表
还是在http://www.ceconline.com/script/prototype-1.6.0.2.js
里找感觉！

什么样的感觉?

TOP

doudouyihao

新手上路

认证
帖子: 6
体力: 19
威望: 0
当前: 北京丰台区
离线: 22 天

9^# 大中小发表于 2009-11-14 13:15

若果解决不了这个要刷新的问题，那么这个效果是没有用的，期待高手解析

TOP

wangxinwei

新手上路

帖子: 14
体力: 29
威望: 0
离线: 28 天

10^# 大中小发表于 2009-11-14 13:18

观望,这么好的效果,如果需要刷新一下才能有的话,太可惜了

阏

TOP

wfzong [楼主]

新手上路

认证
帖子: 10
体力: 26
威望: 0
当前: 北京朝阳区

11^# 大中小发表于 2009-11-15 09:29

引用:

原帖由 doudouyihao 于 2009-11-14 13:15 发表
若果解决不了这个要刷新的问题，那么这个效果是没有用的，期待高手解析

只是在这个论坛调用的时候有问题，应用没有问题．

附件是一个较完整的应用．

[ 本帖最后由 wfzong 于 2009-11-15 09:46 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP