首页
导航
博客
电子书
算法
众创
代码
随贴
关于我们
您好，欢迎来到码863代码分享网！ 请
[登录]
/
[注册]
搜 索
superslide2.1.1示例，兼容性高，实测ie7起兼容
编辑
代码正文
双击正文可选择全部
1[代码][html]
尝试一下
<!DOCTYPE html> <html style="height:500%"> <head> <meta charset="utf-8"/> <title>superslide2.1.1示例，兼容性高，实测ie7起兼容</title> <style> h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form, img, p { margin: 0; padding: 0; border: none; list-style-type: none; } .right_banner {width: 735px;float: left;} .slideBox{ width: 725px;height: 265px;margin: 10px 0 0 10px; overflow:hidden; position:relative; float: left; } .slideBox .hd{ width: 725px;height: 6px;position: absolute;left: 0;bottom: 0; z-index:1;} .slideBox .hd ul{ float:left; } .slideBox .hd ul li{ width: 240px;height: 6px;overflow: hidden;margin: 0 0 0 1px;display: inline;background: #000;filter: alpha(opacity=50);opacity:0.5;float:left;} .slideBox .hd ul li.first {width: 243px;margin: 0;} .slideBox .hd ul li.on{ background: #6ca430;filter: alpha(opacity=100);opacity: 1; } .slideBox .bd{ position:relative; height:100%; z-index:0; } .slideBox .bd li{ zoom:1; vertical-align:middle; } .slideBox .bd img{ width:725px; height:265px; display:block; } .banner_btn_left {width: 51px;height: 49px;position: absolute;top: 117px;left: 0; display:none} .banner_btn_right {width: 51px;height: 49px;position: absolute;top: 117px;right: 0; display:none} .banner_btn_left_hover{ display:block;} .banner_btn_right a {width: 51px;height: 49px;background: url(http://zhyijiaren.com/themes/miqinew/images/banner_btn.png) 0 -49px no-repeat;float: left;} .banner_btn_left a {width: 51px;height: 49px;background: url(http://zhyijiaren.com/themes/miqinew/images/banner_btn.png) 0 0 no-repeat;float: left;} </style> <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> <script src="http://zhyijiaren.com/js/jquery.SuperSlide.js"></script> </head> <body style="height:500%"> <div id="slideBox" class="slideBox banner_btn_left_hover banner_btn_right_hover"> <div class="hd"> <ul> <li class="first"> </li> <li class="on"> </li> <li class=""> </li> </ul> </div> <div class="bd"> <div class="tempWrap" style="overflow:hidden; position:relative; width:725px"> <ul style="width: 2900px; left: -725px; position: relative; overflow: hidden; padding: 0px; margin: 0px;"> <li style="float:left;width:725px;"><a href="http://www.zhyijiaren.com" target="_blank"> <img height="265" src="http://zhyijiaren.com/data/afficheimg/20161008gejtli.jpg" width="725"></a> </li> <li style="float: left; width: 725px;"><a href="http://zhyijiaren.com/goods.php?id=472" target="_blank"><img height="265" alt="" src="http://www.zhyijiaren.com/data/afficheimg/20161019cprymo.jpg" width="725"></a> </li> <li style="float: left; width: 725px;"><a href="http://zhyijiaren.com/goods.php?id=581" target="_blank"><img height="265" alt="" src="http://www.zhyijiaren.com/data/afficheimg/20161008exoqrh.jpg" width="725"></a> </li> <li style="float: left; width: 725px;"><a href="http://zhyijiaren.com/goods.php?id=583" target="_blank"><img height="265" alt="" src="http://www.zhyijiaren.com/data/afficheimg/20161008gejtli.jpg" width="725"></a> </li> </ul> </div> </div> <div class="banner_btn_left" style="display: block;"> <a class="prev" href="javascript:void(0)"></a> </div> <div class="banner_btn_right" style="display: block;"> <a class="next" href="javascript:void(0)"></a> </div> </div> <script> jQuery(".slideBox").slide({mainCell:".bd ul",effect:"left",trigger:"click",autoPlay:true}); </script> </body> </html>
文明上网理性发言，请遵守新闻评论服务协议
0 条评论
发布评论
全部评论
最新
/
最热
暂无评论
加载更多
CopyRight 2002～2023 精通2100网 联系邮箱:qqtxt@163.com
版权所有:精通2100网
湘ICP备2023018646号-1
MYSQl共执行 3 个查询，用时 0.001964807510376 秒，PHP脚本用时 0.004108 秒，占用内存 0.509 MB，Gzip 已启用
