使用HTML+CSS实现轮播图

轮播图的实现

使用CSS控制轮播图

 

无自动轮转，只能通过悬浮标签来改变。

1. 准备材料，一个div用来盛放所有参与轮播的图片、n个用来控制悬浮的小div、n-1个放好图片的img。
2. 将div相对定位但是不设置偏移量（为下边的绝对定位提供定位点）,然后通过绝对定位将小div固定在大div中合适的位置（由于相对定位进行偏移量时，会造成原本的位置被占用，所以不使用相对定位来对小div定位。）。然后将img都进行绝对定位不设置偏移量（我理解为将这些照片从底层升起来，然后就能重叠放了）。
3. 设置小div的hover通过通用兄弟选择器将img的z-index的值增加。达到显示的效果。注意，要提前将小div的z-index先升高点(比img将要升高的多)，要不然当悬浮到小div时，img的z-index增加会造成小div的消失。带来不便

 

效果图：

一：鼠标不对1、2、3悬浮。默认的出现第一张照片。且1、2、3的透明度为0.5。

 

 

二：悬浮 3  图片更换 且将3的透明度更改 

 

其他的图片修改类似

 

源码：

    
        
        
    
    
    
        

            
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。注意:兄弟选择器，只能选择自己后边的标签。