轮播图的实现
使用CSS控制轮播图
无自动轮转,只能通过悬浮标签来改变。
- 准备材料,一个div用来盛放所有参与轮播的图片、n个用来控制悬浮的小div、n-1个放好图片的img。
- 将div相对定位但是不设置偏移量(为下边的绝对定位提供定位点),然后通过绝对定位将小div固定在大div中合适的位置(由于相对定位进行偏移量时,会造成原本的位置被占用,所以不使用相对定位来对小div定位。)。然后将img都进行绝对定位不设置偏移量(我理解为将这些照片从底层升起来,然后就能重叠放了)。
- 设置小div的hover通过通用兄弟选择器将img的z-index的值增加。达到显示的效果。注意,要提前将小div的z-index先升高点(比img将要升高的多),要不然当悬浮到小div时,img的z-index增加会造成小div的消失。带来不便
效果图:
一:鼠标不对1、2、3悬浮。默认的出现第一张照片。且1、2、3的透明度为0.5。
二:悬浮 3 图片更换 且将3的透明度更改
其他的图片修改类似
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.div1{
width: 500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
position: relative;
}
.div01{
width: 20px;
height: 20px;
box-sizing: border-box;
opacity:0.5;
line-height: 20px;
text-align: center;
border-radius: 20px;
background-color: white;
z-index: 10;
}
#div2{
position:absolute;
right: 70px;
bottom: 10px;
}
#div3{
position:absolute;
right: 40px;
bottom: 10px;
}
#div4 {
position: absolute;
right: 10px;
bottom: 10px;
}
#div2:hover ~ #img1{
z-index: 2;
}
#div2:hover{
opacity:1;
}
#div3:hover ~ #img2{
z-index: 2;
}
#div3:hover{
opacity:1;
}
#div4:hover ~ #img3{
z-index: 2;
}
#div4:hover{
opacity:1;
}
.img01{
position:absolute;
}
img{
width: 500px;
height: 500px;
}
</style>
<body>
<div class="div1">
<div id="div2" class="div01">1</div>
<div id="div3" class="div01">2</div>
<div id="div4" class="div01">3</div>
<img id="img1" class="img01" src="img/jd01.jpg">
<img id="img2" class="img01" src="img/jd02.jpg">
<img id="img3" class="img01" src="img/jd03.jpg">
<img id="img4" class="img01" src="img/jd04.jpg">
</div>
</body>
</html>
难点1:如何将照片叠加在一块。
解决方法:所有的照片都放在div中会造成div放不下,内容撑出来。所以要将图片都提高一个层,像定位、浮动都能够使标签脱离标准文本流,我们把标准文本流看作为第0层,那么浮动就会使标签抬升成为第一层。所以我们使用绝对定位将img标签抬升,抬升会造成覆盖,就是最后抬升的会遮住前边抬升的。(在绝对定位前,先给父级相对定位一下,因为绝对定位规则是:当父级有定位就按照父级的定位走,如果父级没有定位。就在向上找父级,实在没有,最后以窗体左上角为原点。)
难点2:如何设置悬浮div,实现更改img的CSS样式。
解决方法:将div设置为img的兄弟标签且是在img标签前的兄弟节点。因为使用伪类兄弟选择器时,只能调用当前标签后边的兄弟标签。代码:#div3:hover ~ #img2 的原理就是,这个#div3:hover是id为#div3的标签当鼠标悬浮时发生。这个~ #img2是伪类的通用兄弟选择器,选择之后的兄弟为img2的标签。总体意思是,#div3:hover这个触发后就会选择 ~ #img2通过通配兄弟的方法找img2。注意:兄弟选择器,只能选择自己后边的标签。