使用HTML+CSS实现轮播图 |
您所在的位置：网站首页 › 用css3写轮播图 › 使用HTML+CSS实现轮播图 |
使用HTML+CSS实现轮播图
|
轮播图的实现
使用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的透明度更改
其他的图片修改类似
源码： 轮播图 *{ 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; } 1 2 3
难点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。注意:兄弟选择器，只能选择自己后边的标签。
|
【本文地址】