首页>>焦点图>>jquery焦点图 slideshow(2013-10-03)

jquery焦点图 slideshow

 代码很简单

jquery焦点图 slideshow
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="slideshow">  
  2.     <ul class="slides">  
  3.         <li><img src="../zhoushan.jpg" width="620" height="320" alt="" /></li>  
  4.         <li><img src="../freejs.jpg" width="620" height="320" alt="freejs" /></li>  
  5.         <li><img src="../sanya.jpg" width="620" height="320" alt="" /></li>  
  6.         <li><img src="../dalian.jpg" width="620" height="320" alt="" /></li>  
  7.     </ul>  
  8.     <span class="arrow previous"></span>  
  9.     <span class="arrow next"></span>  
  10. </div>  

 

CSS Code
  1. body{  
  2.     color:#eee;  
  3.     background:url('img/bg.jpg') repeat-x #0c0d10;  
  4. }  
  5.   
  6. #slideshow{  
  7.     background-color:#F5F5F5;  
  8.     border:1px solid #FFFFFF;  
  9.     height:340px;  
  10.     margin:20px auto;  
  11.     position:relative;  
  12.     width:640px;  
  13.       
  14.     -moz-box-shadow:0 0 22px #111;  
  15.     -webkit-box-shadow:0 0 22px #111;  
  16.     box-shadow:0 0 22px #111;  
  17. }  
  18.   
  19. #slideshow ul{  
  20.     height:320px;  
  21.     left:10px;  
  22.     list-style:none outside none;  
  23.     overflow:hidden;  
  24.     position:absolute;  
  25.     top:10px;  
  26.     width:620px;  
  27. }  
  28.   
  29. #slideshow li{  
  30.     position:absolute;  
  31.     display:none;  
  32.     z-index:10;  
  33. }  
  34.   
  35. #slideshow li:first-child{  
  36.     display:block;  
  37.     z-index:1000;  
  38. }  
  39.   
  40. #slideshow .slideActive{  
  41.     z-index:1000;  
  42. }  
  43.   
  44. #slideshow canvas{  
  45.     display:none;  
  46.     position:absolute;  
  47.     z-index:100;  
  48. }  
  49.   
  50. #slideshow .arrow{  
  51.     height:86px;  
  52.     width:60px;  
  53.     position:absolute;  
  54.     background:url('img/arrows.png') no-repeat;  
  55.     top:50%;  
  56.     margin-top:-43px;  
  57.     cursor:pointer;  
  58.     z-index:5000;  
  59. }  
  60.   
  61. #slideshow .previous{ background-position:left top;left:0;}  
  62. #slideshow .previous:hover{ background-position:left bottombottom;}  
  63.   
  64. #slideshow .next{ background-position:rightright top;rightright:0;}  
  65. #slideshow .next:hover{ background-position:rightright bottombottom;}  

js文件比较大，请到演示页面查看源码


原文地址:http://www.freejs.net/article_jiaodiantu_56.html