基於prototype和scriptaculous的輪播器v1.0.0

最新推荐文章于 2021-01-27 21:15:19 发布

ivanfront

最新推荐文章于 2021-01-27 21:15:19 发布

阅读量953

点赞数

分类专栏： web前端文章标签：輪播 img prototype

本文链接：https://blog.csdn.net/ivanet/article/details/17020561

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>prototype 测试</title>
<link rel="stylesheet" type="text/css" href="Styles/base/reset.css"/>
<link rel="stylesheet" type="text/css" href="Styles/base/base.css"/>

<script type="text/javascript" src="Scripts/prototype1.6.1.js"></script>
<script type="text/javascript" src="Scripts/effectPlus/scriptaculous.js"></script>

</head>
<body>
<div id="scroller">
    	<ul>
        	<li style="background:#9C6;" class="item"><a href="javascript:void(0);">1</a></li>
            <li style="background:#675;" class="item"><a href="javascript:void(0);">2</a></li>
            <li style="background:#7c3;" class="item"><a href="javascript:void(0);">3</a></li>
            <li style="background:#89f;" class="item"><a href="javascript:void(0);">4</a></li>
            <li style="background:#69e;" class="item"><a href="javascript:void(0);">5</a></li>
        </ul>
        <a href="#" id="scroller-last"><</a>
        <a href="#" id="scroller-next">></a>
    </div>
    <div id="pointer"></div>
</body>
</html>

css code:

	#scroller{display:block;width:500px; height:300px; background:#6CC; border:1px #ccc solid; overflow:hidden; position:relative;}
	#scroller ul{float:none; text-align:left; position:absolute; left:0px; top:0px;}
	#scroller .item{display:block;width:500px; height:300px; float:left;  overflow:hidden;}
		
	#scroller .item a{font-size:36px; color:red;}
	#scroller-last{ font-size:24px; color:#000; position:absolute; left:0px; top:50%; cursor:pointer;}
	#scroller-next{font-size:24px; color:#000; position:absolute; right:0px; top:50%; cursor:pointer;}
		
	#pointer{text-align:center;width:500px;}
	#pointer label{padding:5px; font-size:16px; color:#000; cursor:pointer;}
	#pointer .pointer-cur{color:#F03; cursor:default;}

js代碼：

//scroller类
var Scroller=Class.create({
	initialize:function(object){
		var id=$(object.scrollerId);//滚动块id选择器元素
		var lastBt=$(object.lastBt);//上一个按钮id
		var nextBt=$(object.nextBt);//下一个按钮id
		var pointerId=$(object.pointer);//指示点块id
		var cur=object.pointerCur;//当前选中指示点的类
		var pointerEvent=object.pointerEvent==undefined?'mouseover':object.pointerEvent;//指示点触发事件，默认为滑过
		var autoPlay=object.autoPlay==undefined?true:object.autoPlay;//是否自动，默认自动
		var interval=object.interval==undefined?3:object.interval;//滚动间隔时间，默认3秒
		var speed=object.speed==undefined?0.7:object.speed;//滚动速度，默认0.7秒
		var pe;//自动标志对象
		var pointerArray;//指示点对象数组
		//滚动个数
		this.nums=id.down('ul').childElements().size();
		//高宽
		var w=id.down('ul').childElements()[0].getWidth();
		var h=id.down('ul').childElements()[0].getHeight();
		//设置ul的高宽
		id.down('ul').setStyle({width:w*this.nums+'px',height:h+'px'});
		//设置指示点
		if(pointerId!=undefined){
			for(var i=1; i<=this.nums; i++){
				pointerId.insert(new Element('label'));	
			}
			//如果没有设置背景图片则添加数字
			if(pointerId.down('label').getStyle('backgroundImage')=='none'){
				for(var i=0; i<this.nums; i++){
					pointerId.down(i).update(i+1);	
				}
			}
			//为第一个label添加类cur
			pointerId.down('label').addClassName(cur);
			pointerArray=pointerId.childElements();//指示点对象数组
		}
		
		var lenght=this.nums;
		var curNum=1;//当前号
		
		//绑定左右按钮事件
		if(nextBt!=undefined&&lastBt!=undefined){
			nextBt.observe('click',function(event){
				if(pe!=undefined) pe.stop();
				if(curNum<lenght){
					pointerId.down(curNum-1).removeClassName(cur);
					pointerId.down(curNum).addClassName(cur);
					id.down('ul').morph('left:-'+w*curNum+'px',{duration:speed});
					++curNum;
					if(curNum==lenght){
						this.hide();
					}
					lastBt.show()
				}
				if(pe!=undefined) pe.resume();
				//alert(pe);
			});
			lastBt.observe('click',function(event){
				if(pe!=undefined) pe.stop();
				if(curNum>1){
					--curNum;
					pointerId.down(curNum).removeClassName(cur);
					pointerId.down(curNum-1).addClassName(cur);
					id.down('ul').morph('left:-'+w*(curNum-1)+'px',{duration:speed});
					if(curNum==1){
						this.hide();	
					}
					nextBt.show();
				}
				if(pe!=undefined) pe.resume();
			});
		}
		
		//解决ie不兼容indexOf
		if(!Array.indexOf){
			Array.prototype.indexOf = function(obj){
				for(var i=0; i<this.length; i++){
					if(this[i]==obj){
						return i;
					}
				}
				return -1;
			} 
		} 
		//指示点事件
		if(pointerId!=undefined){
			pointerArray.each(function(obj){
				obj.observe(pointerEvent,function(event){
					if(pe!=undefined) pe.stop();//停止自动滚
					if(nextBt!=undefined&&lastBt!=undefined){
						if(curNum==1) lastBt.show();
						if(curNum==pointerArray.length) nextBt.show();
					}
					for(var j=0; j<pointerArray.length; j++){
						if(pointerArray[j].hasClassName(cur)){
							pointerArray[j].removeClassName(cur);
							pointerArray[pointerArray.indexOf(obj)].addClassName(cur);
							break;
						}
					}
					id.down('ul').morph('left:-'+w*pointerArray.indexOf(obj)+'px',{duration:speed});
					curNum=pointerArray.indexOf(obj)+1;
					if(nextBt!=undefined&&lastBt!=undefined){
						if(curNum==1) lastBt.hide();
						if(curNum==pointerArray.length) nextBt.hide();
					}
					if(pe!=undefined) pe.resume();//回复自动滚
				});
			});
		}
		//自动滚动事件
		PeriodicalExecuter.prototype.resume = function(){
			if(!this.timer)
				this.registerCallback();
		}; 
		if(autoPlay){
				pe = new PeriodicalExecuter(function(){
				if(nextBt!=undefined&&lastBt!=undefined){
					lastBt.show();
					nextBt.show();
				}
				if(pointerId!=undefined) pointerId.down(curNum-1).removeClassName(cur);
				++curNum;
				if(curNum>lenght) curNum=1;
				id.down('ul').morph('left:-'+w*(curNum-1)+'px',{duration:speed});
				if(pointerId!=undefined) pointerId.down(curNum-1).addClassName(cur);
			}, interval);
		}
		// 如果要停止
		//pe.stop();
		// 停止后再重新启动
		//pe.resume();
	}
});

//实例化一个scroller
var scroller1=new Scroller({
	scrollerId:'scroller',
	lastBt:'scroller-last',
	nextBt:'scroller-next',
	pointer:'pointer',
	pointerCur:'pointer-cur',
	pointerEvent:'click',
	autoPlay:true,
	interval:3.5,
	speed:0.7
});

ivanfront

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基於prototype和scriptaculous的輪播器v1.0.0

html代碼：prototype 测试 #scroller{display:block;width:500px; height:300px; background:#6CC; border:1px #ccc solid; overflow:hidden; position:relative;} #scroller ul{float:none; text-ali
复制链接

扫一扫