使用JS进行图片切换

最新推荐文章于 2023-03-09 15:14:38 发布

小仓桑

最新推荐文章于 2023-03-09 15:14:38 发布

阅读量248

点赞数

分类专栏： javascript HTML 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43462019/article/details/102776678

版权

javascript 同时被 2 个专栏收录

45 篇文章 4 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片切换</title>
	</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>
	</body>
</html>
<script>
	function id(id){
		return document.getElementById(id) ;
	}
	var index = 0 ;
	var context = ["一","二","三","四"] ;
	var srcArr = ["图片一","图片二","图片三","图片四"] ;
	var flag = 0 ;
	function showImg(){
		id("order").innerHTML = (index+1)+"/4" ;
		id("info").innerHTML = "图片"+context[index] ;
		id("picture").src = "img/"+srcArr[index]+".jpg" ;
	}
	//调用函数，初始化页面内容
	showImg() ;
	id("next").onclick = function(){
		if(index == 3 && flag == 1){
			index = 3 ;
			alert("这是最后一张了...")
		}else if(index == 3 && flag == 0){
			index = 0 ;
		}else{
			index++;
		}
		showImg() ;
	}
	id("prev").onclick = function(){
		if (index == 0 && flag == 1) {
			index = 0 ;
			alert("这是第一张了...") ;
		} else if (index == 0 && flag == 0) {
			index = 3 ;
		} else{
			index--;
		}
		showImg() ;
	}
	id("round").onclick = function(){
		alert("开始循环播放了！");
		flag = 0 ;
	}
	id("single").onclick = function(){
		alert("开始顺序播放了！") ;
		flag = 1 ;
	}
</script>
<style>
			#controls{
				width: 400px;
				margin: 0 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: appha(opacity:80);
				opacity: 0.8;
			}
			#order,#info{
				position: absolute;
				width: 100%;
				height: 30px;
				text-align: center;
				line-height: 30px;
				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>

效果图：

小仓桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS进行图片切换

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图片切换</title> </head> <body> <div id="controls"> <input id="round" typ...
复制链接

扫一扫

专栏目录