顺序播放和循环播放

<style>
		#controls {
			width:400px;
			margin: auto;
			text-align: center;
		}
		#container {
			width: 400px;
			height:400px;
			border: 10px solid #eee;
			position: relative;
			background: gray;
			margin: 10px auto 0;
		}
		#prev, #next {
			position: absolute;
			background: black;
			filter:alpha(opacity:40);
			opacity: 0.4;
			font-size: 20px;
			color: white;
			width: 40px;
			height: 40px;
			border: 2px solid white;
			line-height: 40px;
			text-align: center;
			top: 180px;
			pointer: cursor;
			text-decoration: none;
		}
		#prev:hover, #next:hover {
			filter:alpha(opacity:80);
			opacity: 0.8;
		}
		#order, #info {
			position: absolute;
			width:100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: black;
			filter:alpha(opacity:60);
			opacity: 0.6;
			font-size: 20px;
			color: white;
		}
		#prev {
			left: 0;
		}
		#next {
			right: 0;
		}
		#picture {
			height: 400px;
			width: 400px;
		}
		#order {
			top: 0;
		}
		#info {
			bottom: 0;
		}
	</style>
	
		
</head>
<body>
	<div id="controls">
		<input id="round" type="button" value = "循环播放">
		<input id="single" type="button" value = "顺序播放">
	</div>
	<div id="container">
        <a href='javascript:' id="prev">&lt;</a>
        <a href='javascript:' id="next">&gt;</a>
        <div id="order">图片加载中……</div>
        <div id="info">图片加载中……</div>
        <img id="picture">
	</div>
	<script type="text/javascript">
	    // 封装一个函数  根据id找元素
		function $(id){
			return document.getElementById(id)
		}
		var imgsArr=["1.jpg","2.jpg","3.jpg","4.jpg"];
		var imgsText=["图片一","图片二","图片三","图片四"];
		var index=0;
		var flag=true;
		function infoShow(){
			$("picture").src=imgsArr[index];
			$("order").innerHTML=(index+1)+"/4";
			$("info").innerHTML=imgsText[index];
		}
		infoShow();
		$("prev").onclick=function(){
			index--;
			if(flag&&index==-1){
				alert("已经是第一张了");
				index=0;
			}
			if(!flag&&index==-1){
				index=imgsArr.length-1;
			}
			infoShow();
		}
		$("next").onclick=function(){
			index++;
			if(flag&&index==imgsArr.length){
				alert("已经是最后一张了");
				index=imgsArr.length-1;
			}
			if(!flag&&index==imgsArr.length){
				index=0;
			}
			infoShow();
		}
		$("round").onclick=function(){
			alert("开始循环播放");
			flag=false;
		}
		$("single").onclick=function(){
			alert("开始顺序播放");
			flag=true;
		}
	</script>
顺序播放和循环播放

猜你喜欢
