支付宝(淘宝)banner轮播图效果

支付宝(淘宝)banner轮播图效果

文件代码

  1. <div style="height:80px;overflow:hidden;">div
  2. <div class="flexslider">
  3.     <ul class="slides">
  4.         <li style="background:url(images/img1.jpg) 50% 0 no-repeat;">li
  5.         <li style="background:url(images/img2.jpg) 50% 0 no-repeat;">li
  6.         <li style="background:url(images/img3.jpg) 50% 0 no-repeat;">li
  7.         <li style="background:url(images/img4.jpg) 50% 0 no-repeat;">li
  8.         <li style="background:url(images/img5.jpg) 50% 0 no-repeat;">li
  9.     ul
  10. div
  11. <script type="text/javascript" src="js/jquery-1.7.2.min.js">script
  12. <script type="text/javascript" src="js/jquery.flexslider-min.js">script
  13. <script type="text/javascript">
  14. $(document).ready(function(){
  15.     $('.flexslider').flexslider({
  16.         directionNav: true,
  17.         pauseOnAction: false
  18.     });
  19. });
  20. script

css样式

  1. *{margin:0;padding:0;list-style-type:none;}
  2. a,img{border:0;}
  3. body{font:12px/180% ArialHelveticasans-serif"新宋体";}
  4. /* flexslider */
  5. .flexslider{position:relative;height:400px;overflow:hidden;background:url(images/loading.gif) 50% no-repeat;}
  6. .slides{position:relative;z-index:1;}
  7. .slides li{height:400px;}
  8. .flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center;}
  9. .flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
  10. .flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer;}
  11. .flex-control-nav .flex-active{background-position:0 0;}
  12. .flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
  13. .flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
  14. .flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat;}
  15. .flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat;}

资源下载

隐藏内容:******,购买后可见!

下载价格:5 黑币

您需要先后,才能购买资源

【如果资源链接失效请及时联系站长处理!】 QQ: 785967707

 

喜欢这篇文章吗?按个赞吧,不会令你失望!

发表评论