javascript写的轮播图

欢迎指点！

先放上效果图：

鼠标移入界面后：

图片有点大，展示不全，可以到我的相册里看完整图。 http://hiuman.iteye.com/picture/136355

<body  onselectstart="return false;" style="-moz-user-select:none;">
	<div class="containner">
		<span id="prev"><</span>
		<span id="next">></span>
		<div class="picGroup">
			<img src="34.jpg">
			<img src="106.jpg">
			<img src="146.jpg">
		</div>
		<div class="titleGroup">
			<p>标题1</p>
			<p>标题2</p>
			<p>标题3</p>
		</div>
		<ul class="btnGroup">
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>

*{margin: 0;padding: 0;}
li{list-style: none;}
body{background: #fff;}

#prev,#next{position: absolute;top: 0;font-size: 50px;font-weight: bold;color: DodgerBlue;z-index: 4;display: none;background: rgba(244,50,0,.1);height: 800px;width: 16%;line-height: 800px;text-align: center;cursor: pointer;}
#prev:hover,#next:hover{color: DarkTurquoise;}
#prev{left: 0;}
#next{right: 0;}

.containner{ position: relative;overflow: hidden;height: 800px; }

.picGroup{ position: absolute;top: 0;height: 5000px; }
.picGroup img{ display: block; }

.titleGroup{ width:100%;background:rgba(0,0,0,.2);position: absolute;top: 84%;/*left: 50%;*/ }
.titleGroup p{ display: none;text-align: center;line-height:36px; }
.titleGroup p:first-child{ display: block; }

.btnGroup{ position: absolute;top: 90%;left: 47.5%; }
.btnGroup li{width: 10px;height: 10px;margin: 4px;float: left;border: 1px solid red;background: #fff;cursor: pointer;}
.btnGroup li:first-child{background: red;}

var current=0;
var imgHeight=800;


//自动开始播放(从0开始)
var timer=setInterval('run()',2000);
function run(){
	current=parseInt(current);
	// alert('run'+current)
	var topValue=document.getElementsByClassName('picGroup')[0].offsetTop;
	var picLen=document.getElementsByClassName('picGroup')[0].children.length;
	var max=(-1)*(picLen-1)*800;
	if (topValue>max) {
		current+=1;
	 }else if(topValue=max){
		current=0;
	}
	document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
	liChange();
	titleChange();
	
}


// //鼠标移入移除的效果
var containner=document.getElementsByClassName('containner')[0];
var ctrlLeft=document.getElementById('prev');
var ctrlRight=document.getElementById('next');
containner.onmouseover=function(){
	ctrlLeft.style.display='block';
	ctrlRight.style.display='block';
}
containner.onmouseout=function(){
	ctrlLeft.style.display='none';
	ctrlRight.style.display='none';
}
ctrlLeft.onclick=function(){
	clearInterval(timer);
	//alert('left'+current)
	if (current>=1) {
	 	current-=1;
	}else{
		current=document.getElementsByClassName('picGroup')[0].children.length-1;
	}
 	document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
 	//alert('left-'+current)
 	liChange();
 	titleChange();
 	timer=setInterval('run()',2000);
}
ctrlRight.onclick=function(){
	clearInterval(timer)
	//alert('right'+current)
	if (current<document.getElementsByClassName('picGroup')[0].children.length-1) {
	 	current+=1;
	}else{
		current=0;
	}
	document.getElementsByClassName('picGroup')[0].style.top=(-1)*imgHeight*current+'px';
	 	//alert('right+'+current)
	 	liChange();
	 	titleChange();
	 	timer=setInterval('run()',2000);
}



//li的事件
function liChange(){
	var aLi=document.getElementsByTagName('li');
	var picLen=document.getElementsByClassName('picGroup')[0].children.length;
	for(var i=0;i<picLen;i++){
		if(i==current){
			aLi[i].style.background="red";
		}else{
			aLi[i].style.background="#fff";
		}
		
	}
}

var aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){

	aLi[i].index=[i];
	aLi[i].onclick=function(){
		
		// alert(this.index)
		var t=this.index;
		current=t;

		// alert('li'+current)
		document.getElementsByClassName('picGroup')[0].style.top=(this.index)*(-1)*imgHeight+'px';

		liChange();
		titleChange();
	}
}


//title
function titleChange(){
	var title=document.getElementsByTagName('p');
	var picLen=document.getElementsByClassName('picGroup')[0].children.length;
	for(var i=0;i<picLen;i++){
		if(i==current){
			title[i].style.display="block";
		}else{
			title[i].style.display="none";
		}
	}
}

javascript写的轮播图

猜你喜欢