纯css的image slide

用css到做出的类似于幻灯片的图片展示的东西，先看看是什么样子吧！

当鼠标悬停在‘图片集1’上时是下面这个样子 

 

当鼠标悬停在'图片集2'上时是下面这个样子

 

 就是一种图片集之间切换的效果。当点击某张图片时图片就会放大。

 

当要在自己网页上放置多张图片时，这倒是个不错的选择。

下面就讲讲用css是怎么做出来的。

其实要做出这么个东西，只需要理解两个css里的概念就ok了。第一个就是绝对定位的概念，第二个就是伪类的概念

让我们来仔细分析一下：因为页面会在不同的鼠标状态里显示呈现不同的样子，而且是与鼠标状态相关，在css里实现这个的就只有通过:hover :avtive :focus等伪类了；还有像这样的布局，最容易做到的就是用绝对定位； 

 下面就是html代码：

 1  < body >
 2  < p  id ="intro" >
 3      我的css图片集
 4  </ p >
 5  < ul  id ="out" >
 6  < li  class ="cl" >
 7  < a  class ="title"  href ="#" > 图片集1 </ a >
 8  < div >
 9       < a >< img  src ="img/pic1_s.jpg"  class ="small" />< img  src ="img/pic1.jpg"  class ="big" /></ a >
10       < a >< img  src ="img/pic2_s.jpg"  class ="small" />< img  src ="img/pic2.jpg"  class ="big" /></ a >
11       < a >< img  src ="img/pic3_s.jpg"  class ="small" />< img  src ="img/pic3.jpg"  class ="big" /></ a >
12  </ div >
14  </ li >
16  < li  class ="cl" >
17  < a  class ="title"  href ="#" > 图片集2 </ a >
18  < div >
19       < a >< img  src ="img/pic4_s.jpg"   class ="small" />< img  src ="img/pic4.jpg"  class ="big" /></ a >
20       < a >< img  src ="img/pic5_s.jpg"   class ="small" />< img  src ="img/pic5.jpg"  class ="big" /></ a >
21       < a >< img  src ="img/pic6_s.jpg"   class ="small"   />< img  src ="img/pic6.jpg"  class ="big" /></ a >
22  </ div >
23  </ li >
25  </ ul > <!-- out end -->                                                                                                            26 </body> 

结构很简单的吧！如果你的图片很多，还可以照这个样子往上加。

在来看一看css

 1  ul {
 2      list-style : none ; padding : 0 ; margin : 0 ;
 3  }
 5  li {
 6      list-style : none ; padding : 0 ; margin : 0 ; float : left ; height : 50px ;
 7  }
 9  p#intro {
10      font-size : 16px ; color : #C09 ; position : absolute ; top : 50px ; left : 10px ;
11  }
12 
13  /* 图片不显示 */
14  ul li.cl div {
15      display : none ;
16  }
18  /* 修饰标题 */
19  a.title {
20      display : block ; float : left ; width : 60px ; font-size : 12px ; color : #FF0 ; text-align : center ;
21      background-color : #666 ; margin-right : 5px ; padding : 5px 0 ; text-decoration : none ;
22  }
24  /* 鼠标悬停在标题上 */
25  ul li.cl:hover div {
26      display : block ; position : absolute ; top : 50px ; left : 10px ;
27  }
28 
29  ul li.cl:hover div img.big {
30      display : none ;
31  }
32 
33  ul li.cl:hover div {
34      width : 500px ;
35      height : 500px ;
36  }
38  ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big {
39      display : block ;
40      position : absolute ;
41      top : 0 ; left : 0 ;
42      width : 400px ; height : 400px ;  } 

有三个关键的地方

关键点1：ul li.cl div{display:none}

看，在正常情况下我把包含图片的div全隐藏了。

关键点2：

ul li.cl:hover div{

display:block;position:absolute;top:50px;left:10px;

} 

当鼠标悬停在标题的li上时，包含图片的div就显示出来了。

关键点3：

ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{

display:block;position:absolute;top:0;left:0;width:400px;height:400px;

} 

当点击下去时，大图片就显示出来了。仔细的你或许能够发现，其实大图片这是把小图片隐藏了而已，障眼法吧！如果你的小图片太大的话，可就盖不住了哦!

呵呵，就是这个样子啊，我的css image slide 就做成了。 

还有一点哦，这个在ie8里显示不正常，在ie8里点击不能出现大图片，我还没找到原因呢！ie8以前，就更算了吧！它们应该还不支持除了a标签外的伪类，所以要想在ie8以前里的ie版本里显示出来，最好都包裹个a标签。

做这么个例子，其实是么有什么大的实际意义的，我想用javascrip做或许表现的更好一点。做它，只是能够让我们发现，原来css还可以这样用啊！对css的探索本来就是一件很好玩的事吧!

源代码：/Files/orchid/myCssImageSlide.rar 

转载于:https://www.cnblogs.com/orchid/archive/2009/11/20/1607250.html