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

来源：互联网发布：叶陌折知乎编辑：程序博客网时间：2024/06/05 18:17

一知识点：

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.onload=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.onclick=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.onclick=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>

阅读全文

0 0