輪播圖設計實現

時間 2019-11-30
標籤設計實現简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head>
 	 <!-- author:wyy  -->
	 <!-- time:2017.6.28  13:09 -->
	 <!-- content:輪播圖效果實現  -->
<meta charset="utf-8">
	<title>輪播圖</title>
	<style type="text/css">
		div#container { margin:auto;position: absolute;left: 0;top: 0;right: 0;bottom: 0; 
			width: 600px;height: 400px;border: 10px solid blue;overflow: hidden;}
		div#pacture{ position: absolute; }
		img { width: 600px;height: 400px;float:left;display: block; }
		div#buttons { position: absolute;left: 230px;bottom: 20px; }
		span { margin-right:10px;width: 15px;height:15px;border-radius: 50%;
			background: #fff;display: block;float: left;border: 1px solid #000;z-index:2;}
		.arrow { position: absolute;width: 40px;height: 60px;top: 170px;background: rgba(225,225,225,0.7); display: block;text-decoration: none;font-weight: bold;     line-height: 60px; font-size: 60px;}
		.on { background: orange; }
		#prev { left: 20px; }
		#next { right: 20px; }
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var pacture = document.getElementById('pacture');
			var prev = document.getElementById('prev');
			var next = document.getElementById('next');
			var buttons =document.getElementById('buttons').getElementsByTagName('span');
			

			//js能夠獲取行內樣式pacture.style.left（即內聯樣式）,不能獲取嵌入樣式和外部樣式
			prev.onclick=function (){

				pacture.style.left = parseInt(pacture.style.left)+600+"px";
				if(parseInt(pacture.style.left)==600){
					pacture.style.left = "-2400px";
				}

				if(buttons[0].className=='on'){
							 buttons[0].className='';
							 buttons[4].className='on';
				}else{
					for(var m=1;m<buttons.length;m++){
						if(buttons[m].className=='on'){
							// alert(m);
							buttons[m].className='';
							buttons[m-1].className='on';
							break;
						
						}
					}
				}
				// this.className='';
				// alert(pacture.style.left);
			}
			next.onclick=function (){

				pacture.style.left = parseInt(pacture.style.left)-600+"px";
				if(parseInt(pacture.style.left)==-3600){
					pacture.style.left = "-600px";
				}

				if(buttons[4].className=='on'){
							 buttons[4].className='';
							 buttons[0].className='on';
				}else{
					for(var m=0;m<buttons.length;m++){
						if(buttons[m].className=='on'){
							buttons[m].className='';
							buttons[m+1].className='on';
							break;
						
						}
					}
				}
			}
			
			for(var i=0;i<buttons.length;i++){
				(function(i){
					
					buttons[i].onclick = function(){
						pacture.style.left = "-600px";
						if(this.className != 'on'){
							for(var j=0;j<this.parentNode.childNodes.length;j++)
							this.parentNode.childNodes[j].className=''; 
							this.className='on';
						}
						pacture.style.left = parseInt(pacture.style.left)-i*600+"px";
					}
				})(i);
				
			}
　　　　　　　　　　　　　　　
　　　　　　　　var s;
   　　　　　　　　function play(){
    　　　　　　　　 s =setInterval(function(){
   　　　　　　　　　　 　　next.onclick();
  　　　　　　　　　　 　},1000);
  　　　　　　　　 }
  　　　　　　　　 play();
   　　　　　　　　function stop(){
   　　　　　　　　　　 clearInterval(s);
  　　　　　　　　 }
  　　　　　　　　 container.onmouseout = play;
   　　　　　　　　container.onmouseover = stop;　　　　　　　　　　　　　　　　

	}
	</script>
</head>
<body>
	<div id="container">
		<div id="pacture"  style="left:-600px;">
			<img src="5.jpg" >
			<img src="1.jpg" >
			<img src="2.jpg" >
			<img src="3.jpg" >
			<img src="4.jpg" >
			<img src="5.jpg" >
			<img src="1.jpg" >
		</div>
		<div id="buttons">
			<span index="1" class="on"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
		</div>
		<a href="javascript:;" id="prev" class="arrow"><</a>
		<a href="javascript:;" id="next" class="arrow">></a>
	</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。