advert.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <style>
  2. /*滚动*/
  3. .gdtu {
  4. width:1190px;
  5. height:100px;
  6. margin:0 auto;
  7. background: #f1f1f1;
  8. margin-top: 20px;
  9. }
  10. .gddiv {
  11. margin:0 auto;
  12. width:100%;
  13. overflow:hidden;
  14. height:96px;
  15. }
  16. .gddiv ul {
  17. float:left;
  18. height:91px;
  19. }
  20. .gddiv li {
  21. float:left;
  22. width:161px;
  23. height:91px;
  24. display:inline;
  25. margin-right: 15px;
  26. margin-top: 4px;
  27. }
  28. .innerElem {
  29. width:9999px;
  30. }
  31. .gddiv li img{
  32. width:161px;
  33. height:91px;
  34. }
  35. </style>
  36. <div class="gdtu">
  37. <div id="elem" class="gddiv">
  38. <div class="innerElem">
  39. <ul>
  40. <li>
  41. <a href="https://mall.usoftchina.com/store/worldshine#/home" target="_blank" title="深圳市华商龙商务互联科技有限公司">
  42. <img src="static/img/index/adv01.jpg" alt=""/>
  43. </a>
  44. </li>
  45. <li>
  46. <a href="https://mall.usoftchina.com/store/adtracon#/home" target="_blank" title="贝尔(深圳)新材料有限公司">
  47. <img src="static/img/index/adv02.jpg" alt=""/>
  48. </a>
  49. </li>
  50. <li>
  51. <a href="https://mall.usoftchina.com/store/compa#/home" target="_blank" title="上海康帕科贸有限公司">
  52. <img src="static/img/index/adv03.jpg" alt=""/>
  53. </a>
  54. </li>
  55. <li>
  56. <a href="https://mall.usoftchina.com/store/corestaff#/home" target="_blank" title="CoreStaff Hong Kong Limited">
  57. <img src="static/img/index/adv04.jpg" alt=""/>
  58. </a>
  59. </li>
  60. <li>
  61. <a href="https://mall.usoftchina.com/store/chipled#/home" target="_blank" title="深圳市光台光电子有限公司">
  62. <img src="static/img/index/adv05.jpg" alt=""/>
  63. </a>
  64. </li>
  65. <li>
  66. <a href="https://mall.usoftchina.com/store/opd#/home" target="_blank" title="深圳市欧睿达电子有限公司">
  67. <img src="static/img/index/adv06.jpg" alt=""/>
  68. </a>
  69. </li>
  70. <li>
  71. <a href="https://mall.usoftchina.com/store/jrxy#/home" target="_blank" title="深圳市景瑞兴业科技有限公司">
  72. <img src="static/img/index/adv07.jpg" alt=""/>
  73. </a>
  74. </li>
  75. <li>
  76. <a href="https://mall.usoftchina.com/store/hbt#/home" target="_blank" title="深圳市宏博通电子有限公司">
  77. <img src="static/img/index/adv08.jpg" alt=""/>
  78. </a>
  79. </li>
  80. <li>
  81. <a href="https://mall.usoftchina.com/store/yjycoin#/home" target="_blank" title="深圳市益嘉源电子有限公司">
  82. <img src="static/img/index/adv09.jpg" alt=""/>
  83. </a>
  84. </li>
  85. <li>
  86. <a href="https://mall.usoftchina.com/store/d3567635164a4811a5ba9e9adbcdcc87#/home" target="_blank" title="张家港恒芯电子有限公司">
  87. <img src="static/img/index/adv10.jpg" alt=""/>
  88. </a>
  89. </li>
  90. <li>
  91. <a href="https://mall.usoftchina.com/store/winsen#/home" target="_blank" title="郑州炜盛电子科技有限公司">
  92. <img src="static/img/index/adv11.jpg" alt=""/>
  93. </a>
  94. </li>
  95. </ul>
  96. </div>
  97. </div>
  98. </div>
  99. <script language="javascript" type="text/javascript">
  100. function slide(id){
  101. var timer;
  102. var elem = document.getElementById(id);
  103. var elem1 = elem.getElementsByTagName('ul')[0];
  104. var elem2 = document.createElement('ul');
  105. var div = elem.getElementsByTagName('div')[0];
  106. this.Scroll = Scroll;
  107. this.act = act;
  108. function Scroll() {
  109. if (elem.scrollLeft >= elem1.offsetWidth) {
  110. elem.scrollLeft -= elem1.offsetWidth;
  111. }
  112. else {
  113. elem.scrollLeft += 3;
  114. }
  115. }
  116. function act() {
  117. div.appendChild(elem2);
  118. if (elem1.offsetWidth >= elem.offsetWidth) {
  119. elem2.innerHTML = elem1.innerHTML;
  120. timer = setInterval(this.Scroll, 100);
  121. elem.onmouseover = function () {
  122. clearInterval(timer);
  123. }
  124. elem.onmouseout = function () {
  125. timer = setInterval(Scroll, 200);
  126. }
  127. }
  128. }
  129. }
  130. $(".gddiv").each(function () {
  131. var sli = new slide($(this).attr("id"));
  132. sli.act();
  133. });
  134. </script>