JS实现图片轮播效果

最新推荐文章于 2024-05-05 00:57:12 发布

wpbfj

最新推荐文章于 2024-05-05 00:57:12 发布

阅读量430

点赞数

分类专栏： JAVAscript CSS

本文链接：https://blog.csdn.net/wpbfj/article/details/52507063

版权

CSS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JAVAscript

2 篇文章 0 订阅

订阅专栏

看了教程后，又写了一个图片轮播页面。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS图片轮播作业</title>
</head>
<style>
	*{
		margin:0;
		padding:0;
	}
	.wrap{
		width:500px;
		height:500px;
		margin:70px auto;
		border:solid 15px gray;
		position:relative;
	}
	.img{
		width:500px;
		height:500px;
		clear:both;

	}
	.div_btn{
		margin:30px auto;
		width:250px;
		height:50px;
		
	}
	.btn1,.btn2{
		width:100px;
		height:30px;
		text-align:center;
		line-height:25px;/*这里用30px为什么不能垂直居中呢？？*/
		font-size: 20px;
		color:white;
		background:#b2e281;
	}
	.left{
		float:left;
		clear:both;
	}
	.right{
		float:right;

	}
	.prev,.next  {
		width:40px;
		height:40px;
		margin-top:250px;
		border:solid 1px gray;
		font-size: 25px;
		position:absolute;
		top:0px;
		text-decoration:none;
		color:gray;
		text-align:center;
		line-height:40px;
		background: white;
		filter:alpha(opacity=80%);
		opacity:0.8;
	}
	a:hover{
		filter:alpha(opacity=30%);
		opacity:0.3;
	}
	
	.prev{
		left:10px;
	}
	.next{
		right:10px;
	}
	.p_top,.p_bottom{
		width: 500px;
		height:30px;
		background: black;
		filter:alpha(opacity=60%);
		opacity:0.6;
		position:absolute;
		color:white;
		text-align:center;
		line-height: 30px;
	}
	.p_top{
		position:absolute;
		top:0;
		left:0;
	}
	.p_bottom{
		
		bottom:0;
		left:0;
	}
	#span1{
		position: absolute;
		top:-70px;
		text-align:center;
		line-height:30px;
		width:400px;
		height:30px;
		left:50px;
	}
</style>
<script>
	window.onload = function(){
		var oPrev = document.getElementById('prev');//前一张图片按钮声明
		var oNext = document.getElementById('next');//后一张图片按钮声明
		var oP_top = document.getElementById('p_top');//顶部显示的图片张数声明
		var oP_bottom = document.getElementById('p_bottom');//底部显示的图片信息声明
		var oImg = document.getElementById('img');//插入图片变量声明
		var oBtn1 = document.getElementById('btn1');//循环播放按钮
		var oBtn2 = document.getElementById('btn2');//顺序播放按钮
		var oSpan = document.getElementById('span1');//初始化时候提示文字

		var arrUrl = ['http://t-1.tuzhan.com/71af8ce29e83/c-2/l/2014/01/19/01/dea700465eb94b01b6e68407182e3a99.jpg','http://gb.cri.cn/mmsource/images/2015/03/28/74/14921801016817831234.jpg','http://attachments.gfan.com/attachments2/day_110315/110315113890464bfbd7af0262.jpg','http://img8.zol.com.cn/bbs/upload/24289/24288117_0800.jpg'];
		var arrText = ['清纯AK美女','迷人眼神','暴力美学','狙击步'];
		var num = 0;//声明一个初始值
		var onOff = true;
		function fnTab(){
			oP_top.innerHTML = num + 1 + '/' + arrUrl.length;
			oP_bottom.innerHTML = arrText[num];
			oImg.src = arrUrl[num];
		}//将要经常执行的几个步骤写在一个函数里，便于以后调用
		fnTab();//初始化，先执行一次函数，以显示图片张数和信息
		oBtn1.onclick = function(){
			oSpan.innerHTML = '图片可以循环播放';
			onOff = true;//利用布尔值，来对循环方式进行判别执行,此时为不循环

		};
		oBtn2.onclick = function(){
			oSpan.innerHTML = '图片不可以循环播放';
			onOff = false;//此时布尔值决定按照顺序播放
		};
		
		
		oPrev.onclick = function(){
			num --;
			if(num == -1){
				if(onOff){
					num = arrUrl.length - 1;
				}
				else{
					alert('这已经是第一张图片了，不能再往前了。。');
					num = 0;//这里要指定num值，否则num会一直减小
				}
				
			}
			fnTab();
		};//每次匿名函数后边这个分号要记得写

		oNext.onclick = function(){
			num ++;
			if(num == 4){
				if(onOff){
					num = 0;
				}
				else{
				alert('这已经是最后一张图片啦');
				num = 3;//这里注意还要再次指定num值，否则num会一直增加

			}
			}
			
			fnTab();
		};

	}
</script>
<body>
	<div class="div_btn">
		<input type="button" value="循环播放" id="btn1" class="btn1 left" />
		<input type="button" name="" value="顺序播放" id="btn2" class="btn2 right"/>
		
	</div>
	<div id="wrap" class="wrap">
		<span id="span1">图片轮播有两种方式，一种循环，一种不循环</span>
		<a href="javascript:;" id="prev" class="prev"><</a>
		<a href="javascript:;" id="next" class="next">></a>
		<p class="p_top" id="p_top">图片张数</p>
		<p class="p_bottom" id="p_bottom">文字</p>
		<img src="img/1.jpg" alt="图片" class="img" id="img">
	</div>
</body>
</html>

这次注意写了很多注释，确实任重而道远。写的过程中，第一次深刻理解了利用布尔值的重要性，通过布尔值的选取，来决定轮播的方式。

效果图：