demo.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=1200,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <!--[if lt IE 9]>
  10. <script type="text/javascript" src="lib/html5.js"></script>
  11. <script type="text/javascript" src="lib/respond.min.js"></script>
  12. <script type="text/javascript" src="lib/PIE_IE678.js"></script>
  13. <![endif]-->
  14. <link href="http://static.h-ui.net/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
  15. <script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script>
  16. <!--[if IE 6]>
  17. <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
  18. <script>DD_belatedPNG.fix('*');</script>
  19. <![endif]-->
  20. <title>幻灯片效果</title>
  21. <meta name="keywords" content="幻灯片效果"/>
  22. <style type="text/css">
  23. #slider-1{width:760px;text-align:center}
  24. #slider-1 .bd,#slider-1 .bd li,#slider-1 .bd img{width:760px; height:220px}
  25. #slider-1 .hd{ margin-top:2px;height:58px;width:762px; position: static; padding: 0;}
  26. #slider-1 .hd li{ position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px;}
  27. #slider-1 .hd li img{ display:block;width:125px; height:58px;}
  28. #slider-1 .hd li i{ position:absolute; display:block; z-index:9; left:0; top:0; right:0; bottom:0; background-color:rgba(0,0,0,0.6)}
  29. #slider-1 .hd li.active i{ width:11px; height:6px; background:url(images/iconpic-arrow-up.png) no-repeat 0 0; top:-6px; left:50%; margin-left:-5px; bottom:auto; right:auto}
  30. </style>
  31. </head>
  32. <body>
  33. <div id="slider-1" class="bg-fff box-shadow radius">
  34. <div class="slider">
  35. <div class="bd bg-fff">
  36. <ul>
  37. <li><a href="#" target="_blank"><img src="images/b-1.jpg" ></a></li>
  38. <li><a href="#" target="_blank"><img src="images/b-2.jpg" ></a></li>
  39. <li><a href="#" target="_blank"><img src="images/b-3.jpg" ></a></li>
  40. <li><a href="#" target="_blank"><img src="images/b-4.jpg" ></a></li>
  41. <li><a href="#" target="_blank"><img src="images/b-5.jpg" ></a></li>
  42. <li><a href="#" target="_blank"><img src="images/b-6.jpg" ></a></li>
  43. </ul>
  44. </div>
  45. <ol class="hd cl">
  46. <li><i></i><img src="images/s-1.jpg"></li>
  47. <li><i></i><img src="images/s-2.jpg"></li>
  48. <li><i></i><img src="images/s-3.jpg"></li>
  49. <li><i></i><img src="images/s-4.jpg"></li>
  50. <li><i></i><img src="images/s-5.jpg"></li>
  51. <li><i></i><img src="images/s-6.jpg"></li>
  52. </ol>
  53. </div>
  54. </div>
  55. <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
  56. <script type="text/javascript">
  57. $(function(){
  58. jQuery("#slider-1").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:850,interTime:7000,pnLoop:false,titOnClassName:"active"});
  59. });
  60. </script>
  61. </body>
  62. </html>