Web前端学习——JS基础二之图片切换

来源：互联网发布：图像识别算法matlab 编辑：程序博客网时间：2024/06/08 08:08

学习的话更多的是通过视频学习获取知识点，做相应的练习来提升自己~~

题目：编写一个图片切换，类似于百度图片点击一个之后的界面

功能：可点击进入下一张图片，可点击进入上一张图片

DEMO：

实现代码如下：

<!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>#content{width:400px;height:400px;border:10px solid #ccc;margin:40px auto 0 auto;position:relative;background:#f1f1f1;}#content a{width:40px;height:40px;background:#000;border:5px solid #fff;position:absolute;top:175px;text-align:center;text-decoration:none;line-height:40px;color:#fff;font-size:30px;font-weight:bold;filter:alpha(opacity:60);opacity:0.6;}#content a:hover{//兼容IEfilter:alpha(opacity:90);opacity:0.9;}#prev{left:6px;}#next{right:6px;}#text,#span1{position:absolute;left:0;width:400px;height:30px;line-height:30px;text-align:center;color:#fff;background:#000;opacity:0.8;margin:0;filter:alpha(opacity:60);opacity:0.6;}#text{bottom:0;}#span1{top:0;}#img1{width:400px;height:400px;}</style><script>window.onload = function(){var arrUrl = ['1.jpg','2.jpg','3.jpg','4.jpg'];var arrText = "萌萌哒宠物";var Oprev = document.getElementById('prev');var Onext = document.getElementById('next');var Otext = document.getElementById('text');var Ospan = document.getElementById('span1');var Oimg = document.getElementById('img1');var num = 0;MyFunc();function MyFunc(){Oimg.src = arrUrl[num];Ospan.innerHTML = num + 1 + " / " + arrUrl.length;Otext.innerHTML = arrText;}Oprev.onclick = function(){num --;if(num == -1){num = arrUrl.length - 1;}MyFunc();};Onext.onclick = function(){num ++;if(num == arrUrl.length){num = 0;}MyFunc();};};</script></head><body><div id="content"><a id="prev" href="javascript:;"><</a>    <a id="next" href="javascript:;">></a>    <p id="text">图片文字加载中...</p>    <span id="span1">数量加载中... </span>    <img id="img1" /></div></body></html>

其中值得注意的地方：

1. CSS中的position属性

position属性的值有：absolute，fixed，relative，static，inherit

absolute是生成绝对定位的元素，我理解为嵌套在父元素当中，例如本次中 div 是 a 的父元素，div被一张图片填满，那么a的position为absolute表示a在div图片上；

relative是生成相对定位的元素，这就是正常的位置，不会重合；

fixed生成相对于浏览器窗口绝对定位的元素，可类比absolute相对于父元素的定位；

static是默认值没有定位；

inherit是继承父元素的position的值

2. 一般来说对于一个元素设置器CSS有一定的设置顺序（自我总结）

按照本例而言，设置一个元素首先设置其在父元素中的属性（相对或绝对）包括：width，height，background，border，position，left/top/right/bottom等；

然后设置其本身的元素属性：text-align（文本位置），text-decoration（下划线），line-height（线高），color（字体颜色），font-size（字体大小）等；

注意设置透明度的时候：