图片切换（一）(div+css+js)

最新推荐文章于 2023-08-02 17:02:02 发布

其实我不胖_csdn

最新推荐文章于 2023-08-02 17:02:02 发布

阅读量238

点赞数

分类专栏： div+css+js 文章标签： javascript css

div+css+js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一知识点：

1 定位的应用: position:relative(父类用), position:absolute(子类用);

2 滤镜： filter:alpha(opacity=50); opacity:0.5;

3 鼠标滑过改变背景色：a:hover{ background:#ccc}

4 js数组的定义： var arr_img =["img/1.jpg","img/2.jpg","img/3.jpg"];

5 鼠标点击事件：onclick

6 匿名函数：function(){ }

二代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin:0px;
	padding:0px;
 }
 a{
	 text-decoration:none;
 }
body{
	font-size:14px;
	color:#666;
	}
.content{
	width:300px;
	height:300px;
	border:5px solid #000;
	background-color:#ccc;
	margin:50px auto 0px;
	position:relative;
	}
.top{
	height:30px;
	line-height:30px;
	width:300px;
	position:absolute;
	top:0px;
	left:0px;
	background-color:#000;
	color:#fff;
	text-align:center;
    }
.bottom{
	position:absolute;
	bottom:0px;
	left:0px;
	background:#000;
	height:30px;
	width:300px;
	color:#fff;
	line-height:30px;
	text-align:center;
	filter:alpha(opacity=50);
	opacity:0.5;
	}
.pre{ width:30px;
      height:30px;
	  line-height:30px;
	  text-align:center;
	  background-color:#333;
	  position:absolute;
	  left:0px;
	  top:50%;
	  color:#fff;
	}
a:hover{
	background-color:#CCC;
	}
.next{ width:30px;
      height:30px;
	  line-height:30px;
	  text-align:center;
	  background-color:#333;
	  position:absolute;
	  right:0px;
	  top:50%;
	  color:#fff;
	}
</style>
<script>
window.οnlοad=function(){
	var objtop = document.getElementById("top");
	var objnext = document.getElementById("next");
	var objpre = document.getElementById("pre");
	var myimg = document.getElementById("myimg");
	var objbottom = document.getElementById("bottom");
	var arr_img=["img/1.jpg","img/2.jpg","img/3.jpg"];
	var arr_imgName=["图片1","图片2","图片3"];
	var total_img= arr_img.length;
	var num = 0;
	var str_top = num+1+" / "+total_img;
	objtop.innerHTML = str_top;
	objbottom.innerHTML = arr_imgName[num];
	objnext.οnclick=function(){
	
		num = num + 1;
		if(num >= total_img)
		{
			num = 0;
		}
		var img_src = arr_img[num];
		myimg.src = img_src;
		var str_top = num+1+" / "+total_img;
		objtop.innerHTML = str_top;
		objbottom.innerHTML = arr_imgName[num];
		}
		
	objpre.οnclick=function(){
	
		num = num - 1;
		if(num < 0)
		{
			num = 2;
		}
		var img_src = arr_img[num];
		myimg.src = img_src;
		var str_top = num+1+" / "+total_img;
		objtop.innerHTML = str_top;
		objbottom.innerHTML = arr_imgName[num];
		}
	}
	
</script>
</head>

<body>
<div class="content">
<img id="myimg" src="img/1.jpg" width="300px" height="300px"/>
<div id="top" class="top">1/4</div>
<div id ="bottom" class="bottom">图片名称</div>
<a id="pre" class="pre" href="#"><</a>
<a id="next" class="next" href="#">></a>
</div>
</body>
</html>