查看: 875|回复: 0

[PHP代码] 简单易懂的大图轮播,我行你也行。。。

发表于 2017-1-11 19:14:25
游戏辅助AD
  1. <head>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>大图轮播</title>
  5. <style type="text/css">
  6. * {
  7. margin: 0px;
  8. padding: 0px;
  9. }
  10. #container {
  11. width: 500px;
  12. height: 300px;
  13. /*border: 1px solid black;*/
  14. position: relative;
  15. overflow: hidden;
  16. }
  17. .btn {
  18. height: 100%;
  19. width: 30px;
  20. /*border: 1px solid red;*/
  21. position: absolute;
  22. text-align: center;
  23. line-height: 300px;
  24. font-size: 40px;
  25. font-weight: 900;
  26. color: black;
  27. opacity: 0.3;
  28. transition: 0.6s;
  29. z-index: 999;
  30. background-color: white;
  31. }
  32. .btn:hover {
  33. cursor: pointer;
  34. opacity: 0.8;
  35. }
  36. #left-btn {
  37. left: 0px;
  38. top: 0px;
  39. }
  40. #right-btn {
  41. right: 0px;
  42. top: 0px;
  43. }
  44. #ad-container {
  45. width: 2500px;
  46. height: 300px;
  47. /*border: 1px solid blue;*/
  48. position: relative;
  49. }
  50. .ad {
  51. width: 500px;
  52. height: 300px;
  53. float: left;
  54. text-align: center;
  55. line-height: 300px;
  56. font-size: 100px;
  57. font-family: "微软雅黑";
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div id="container">
  63. <div id="left-btn" class="btn">
  64. <</div>
  65. <div id="right-btn" class="btn">></div>
  66. <div id="ad-container">
  67. <div class="ad" style="background-color: mediumpurple;">1</div>
  68. <div class="ad" style="background-color: yellowgreen;">2</div>
  69. <div class="ad" style="background-color: rosybrown;">3</div>
  70. <div class="ad" style="background-color: salmon;">4</div>
  71. <div class="ad" style="background-color: cyan;">5</div>
  72. </div>
  73. </div>
  74. </body>
  75. </html>
  76. <script type="text/javascript">
  77. var rightBtn = document.getElementById("right-btn");
  78. var leftBtn = document.getElementById("left-btn");
  79. var n = 1;
  80. /* var count = 1*/;
  81. var arr = new Array();
  82. /* var m=1;
  83. */ rightBtn.onclick = function() {
  84. var x = window.setInterval("to_right()", 20);
  85. arr.push(x);
  86. }
  87. function clear() {
  88. for(var i in arr) {
  89. window.clearInterval(arr[i]);
  90. }
  91. }
  92. function to_right() {
  93. var adContainer = document.getElementById("ad-container");
  94. if(n == 5) {
  95. clear();
  96. } else if(adContainer.offsetLeft != n * (-500)) {
  97. adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
  98. } else {
  99. n++;
  100. clear();
  101. }
  102. }
  103. var arr1 = new Array();
  104. leftBtn.onclick = function() {
  105. var y = window.setInterval("to_left()", 20);
  106. arr1.push(y);
  107. }
  108. function clear2() {
  109. for(var y in arr1) {
  110. window.clearInterval(arr1[y]);
  111. }
  112. }
  113. function to_left() {
  114. var adContainer = document.getElementById("ad-container");
  115. if(n == 1) {
  116. clear2();
  117. } else if(adContainer.offsetLeft != (n-2) * (-500)) {
  118. adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
  119. } else {
  120. n--;
  121. clear2();
  122. }
  123. }
  124. </script><br><br><br>
复制代码
[code][/code]



回复

使用道具 举报