slider_seller.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <script src="__PUBLIC__/pinduoduo/js/TouchSlide.1.1.js"></script>
  2. <style>
  3. #banner{height:auto;}
  4. .banner-focus {
  5. width: 100%;
  6. height: 10px;
  7. position: relative;
  8. bottom: 15px;
  9. overflow: hidden;
  10. z-index: 10000
  11. }
  12. .banner-focus .banner-hd {
  13. width: 100%;
  14. height: 10px;
  15. bottom: 0;
  16. position: absolute;
  17. content: "";
  18. text-align: right;
  19. z-index: 100000
  20. }
  21. .banner-focus .banner-hd ul,.banner-focus .banner-hd ul li {
  22. display: inline-block;
  23. height: 10px;
  24. vertical-align: top
  25. }
  26. .banner-focus .banner-hd ul li {
  27. width: 10px;
  28. background: #fff;
  29. margin: 0 3px;
  30. overflow: hidden;
  31. border-radius: 100%;
  32. -moz-border-radius: 100%;
  33. -webkit-border-radius: 100%;
  34. -o-border-radius: 100%;
  35. color: #fff
  36. }
  37. .banner-focus .banner-hd ul .on {
  38. background: red;
  39. color: red
  40. }
  41. </style>
  42. <div class="tuanc" id="banner">
  43. <div class="bd">
  44. <ul id="slider">
  45. <volist name="slider" id="v">
  46. <li><a href="{$v.url}"><img src="__ROOT__/Uploads/image/{$v.image}" /></a></li>
  47. </volist>
  48. </ul>
  49. </div>
  50. <div class="banner-focus">
  51. <div class="banner-hd">
  52. <ul>
  53. <?php
  54. $count = count($slider);
  55. for($i=1;$i<=$count;$i++)
  56. {
  57. ?>
  58. <li <?php if($i == 1){ ?>class="on"<?php } ?>></li>
  59. <?php } ?>
  60. </ul>
  61. </div>
  62. </div>
  63. </div>
  64. <?php if(!empty($slider)){ ?>
  65. <script>
  66. $(function(){
  67. TouchSlide({
  68. slideCell:"#banner",
  69. titCell:".banner-hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
  70. mainCell:".bd ul",
  71. delayTime:200,
  72. interTime:5000,
  73. autoPlay:true,
  74. effect:"leftLoop",
  75. autoPage:true //自动分页
  76. });
  77. })
  78. </script>
  79. <?php } ?>