您的位置:首页 > DIV CSS模块 >

 

DIV CSS幻灯片js特效(图+下载)

 

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.css5.com.cn/"><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.css5.com.cn/fanli/test/ 

标签(Tag): 幻灯片 css幻灯片
本文分享URL地址:http://www.css5.com.cn/mokuai/252.html

更多

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2010-11-12     点击:
原创:CSS5     来源网址:http://www.css5.com.cn/mokuai/252.html
本文www.css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!