1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="renderer" content="webkit|ie-comp|ie-stand">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=1200,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- <meta http-equiv="Cache-Control" content="no-siteapp" />
- <!--[if lt IE 9]>
- <script type="text/javascript" src="lib/html5.js"></script>
- <script type="text/javascript" src="lib/respond.min.js"></script>
- <script type="text/javascript" src="lib/PIE_IE678.js"></script>
- <![endif]-->
- <link href="http://static.h-ui.net/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script>
- <!--[if IE 6]>
- <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
- <script>DD_belatedPNG.fix('*');</script>
- <![endif]-->
- <title>幻灯片效果</title>
- <meta name="keywords" content="幻灯片效果"/>
- <style type="text/css">
- #slider-1{width:760px;text-align:center}
- #slider-1 .bd,#slider-1 .bd li,#slider-1 .bd img{width:760px; height:220px}
- #slider-1 .hd{ margin-top:2px;height:58px;width:762px; position: static; padding: 0;}
- #slider-1 .hd li{ position:relative; display:inline-block; float:left; margin-right:2px;cursor:pointer;width:125px; height:58px;}
- #slider-1 .hd li img{ display:block;width:125px; height:58px;}
- #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)}
- #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}
- </style>
- </head>
- <body>
- <div id="slider-1" class="bg-fff box-shadow radius">
- <div class="slider">
- <div class="bd bg-fff">
- <ul>
- <li><a href="#" target="_blank"><img src="images/b-1.jpg" ></a></li>
- <li><a href="#" target="_blank"><img src="images/b-2.jpg" ></a></li>
- <li><a href="#" target="_blank"><img src="images/b-3.jpg" ></a></li>
- <li><a href="#" target="_blank"><img src="images/b-4.jpg" ></a></li>
- <li><a href="#" target="_blank"><img src="images/b-5.jpg" ></a></li>
- <li><a href="#" target="_blank"><img src="images/b-6.jpg" ></a></li>
- </ul>
- </div>
- <ol class="hd cl">
- <li><i></i><img src="images/s-1.jpg"></li>
- <li><i></i><img src="images/s-2.jpg"></li>
- <li><i></i><img src="images/s-3.jpg"></li>
- <li><i></i><img src="images/s-4.jpg"></li>
- <li><i></i><img src="images/s-5.jpg"></li>
- <li><i></i><img src="images/s-6.jpg"></li>
- </ol>
- </div>
- </div>
- <script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
- <script type="text/javascript">
- $(function(){
- jQuery("#slider-1").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:850,interTime:7000,pnLoop:false,titOnClassName:"active"});
- });
- </script>
- </body>
- </html>
|