javascript图片迭代器,为每张图片添加不同的特性

最新推荐文章于 2023-12-04 14:49:41 发布

cdcdhj

最新推荐文章于 2023-12-04 14:49:41 发布

阅读量100

点赞数

分类专栏： javascript学习日记

本文链接：https://blog.csdn.net/cdcdhj/article/details/120204765

版权

JavaScript 迭代器轮播菜单切换 DOM操作

关键词由CSDN通过智能技术生成

javascript学习日记专栏收录该内容

144 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#container{
			list-style: none;
			position: relative;
			top: 0;
			left: 0;
		}
		#container li.menu{
			position: absolute;
			top: 0;
			left: 0;
			width: 690px;
			height: 365px;
			display: none;
		}
		#container li.current{
			position: absolute;
			top: 0;
			left: 0;
			width: 690px;
			height: 365px;
			display: block;
		}
		#container li .img{
			width: 800px;
			height:400px;
		}
		input{
			position: relative;
			top:500px;
		}
		</style>
	</head>
	<body>
		<div>
		<ul id="container">
			<li class="menu"><img src="../img/1.jpg"></li>
			<li class="menu"><img src="../img/2.jpg"></li>
			<li class="menu"><img src="../img/3.jpg"></li>
			<li class="menu"><img src="../img/4.jpg"></li>
		</ul>
		</div>
		<div>
		<input type="button" id="pre" value="上一页">
		<input type="button" id="next" value="下一页">
		<input type="button" id="firstaa" value="第一页">
		<input type="button" id="second" value="尾页">
		</div>
		<script language="javascript">
		var Iterator=function(items,container){
			var container=container&&document.getElementById(container)||document,
			items=container.getElementsByTagName(items),
			length=items.length,
			index=0;
		var splice=[].splice;
		return {
			first:function(){
				index=0;
				return items[index];
			},
			second:function(){
				index=length-1;
				return items[index];
			},
			pre:function(){
				if(--index>0){
					return items[index];
				}else{
					index=0;
					return items[index];
				}
			},
			next:function(){
				if(++index<length){
					return items[index];
				}else{
					index=length-1;
					return items[index];
				}
			},
			get:function(num){
				index=num>=0?num%length:num%length+length;
				return items[index];
			},
			//循环每个元素添加特性
			dealEach:function(fn){
				var args=splice.call(arguments,1);
				for(var i=0;i<length;i++){
					fn.apply(items[i],args);
				}
			},
			//单独为某个元素添加特性
			dealItem:function(num,fn){
				fn.apply(this.get(num),splice.call(arguments,2));
			},
			//每个元素添加特性，排除第几个添加另外的特性
			exclusive:function(num,allFn,numFn){
				this.dealEach(allFn);
				if(Object.prototype.toString.call(num)==="[object Array]"){
					for(var i=0,len=num.length;i<len;i++){
						this.dealItem(num[i],numFn);
					}
				}else{
					this.dealItem(num,numFn);
				}
			}
		}
	}
		var demo=new Iterator('li','container');
		var first=document.getElementById('firstaa');
		var second=document.getElementById('second');
		var next=document.getElementById('next');
		var pre=document.getElementById('pre');
		first.onclick=function(){
			demo.dealEach(function(){
				this.className="menu";
			},[0,3]);
			demo.dealItem(0,function(){
				this.className="current";
			});
		};
		second.onclick=function(){
			demo.dealEach(function(){
				this.className="menu";
			},[0,3]);
			demo.dealItem(3,function(){
				this.className="current";
				this.firstChild.className="img";
			});
		};
		next.onclick=function(){
			demo.next().className="current";
		};
		pre.onclick=function(){
			demo.dealEach(function(){
				this.className="menu";
			},[0,3]);
			demo.pre().className="current";
			
		};
		</script>
		
	</body>
</html>