欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

CSS幻灯片特效-FLASH样式幻灯片切换代码下载-DIV CSS幻灯片特效

DIV CSS幻灯片代码加CSS幻灯片特效下载
DIV+CSS幻灯片特效效果图

CSS代码

  1. html,body {color:#333;font:12px Tahoma,Arial,宋体;} 
  2. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p{margin:0;padding:0} 
  3. li {list-style-type:none;list-style-position:outside} 
  4. img {border:medium none;vertical-align:top} 
  5. input {vertical-align:middle;font-size:12px} 
  6. button {vertical-align:middle;font-size:12px} 
  7. ol, ul {list-style-image:none;list-style-position:outside;list-style-type:none} 
  8. a {color:#363636;text-decoration:none;} 
  9. .clear {clear:both;} 
  10. .clearfix:after {clear:both;content:".";display:block;height:0;overflow:hidden;visibility:hidden} 
  11. em {font-style:normal;} 
  12. .wei{ width:100px; height:100px; background:#00C; margin-left:10px;} 
  13. .img_show{ width:283px; height:194px; position:relative; margin:0 auto; margin-top:10px;} 
  14. .img{ width:283px; height:194px; overflow:hidden;} 
  15. .img ul li{ float:left; width:283px; height:194px;} 
  16. .img ul{ width:1415px; height:194px; } 
  17. .sz{position:absolute; right:5px; bottom:2px;} 
  18. .sz ul li{ float:left; width:20px; height:20px; background:#0F0; color:#00C; margin:0 5px; z-index:100; text-align:center; line-height:20px; cursor:pointer;} 
  19. .sz ul li.on{ background:#900; color:#FFF;} 

HTML源代码

  1.  <div class="con"> 
  2. <div class="img_show"> 
  3. <div class="sz"> 
  4. <ul> 
  5. <li class="on">1</li> 
  6. <li>2</li> 
  7. <li>3</li> 
  8. <li>4</li> 
  9. <li>5</li> 
  10. </ul> 
  11. </div> 
  12. <div class="img"> 
  13. <ul> 
  14. <li><a href="http://www.divcss5.com/"><img src="images/1.jpg" width="283" alt="css 特效" height="194"></a></li> 
  15. <li><img src="images/2.jpg"></li> 
  16. <li><img src="images/3.jpg" width="283" height="194"></li> 
  17. <li><img src="images/4.jpg" width="283" height="194"></li> 
  18. <li><img src="images/5.jpg" width="283" height="194"></li> 
  19. </ul> 
  20. </div> 
  21. </div> 
  22. </div> 

JS代码,见DIV幻灯片下载附件
DIV+CSS幻灯片演示:http://www.divcss5.com/fanli/test/ 

css 幻灯片下载地址:http://www.divcss5.com/bbs/thread-476-1-1.html 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m252.shtml