练习6_DOM轮播图.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_z46pr7nyg5p.css">
  8. <style>
  9. *{
  10. margin: 0;
  11. padding: 0;
  12. }
  13. li{
  14. list-style: none;
  15. }
  16. .swiper-content{
  17. width: 1226px;
  18. height: 460px;
  19. margin: 100px auto;
  20. position: relative;
  21. }
  22. .swiper-nav{
  23. width: 234px;
  24. height: 100%;
  25. background-color: rgba(105, 101, 101,0.6);
  26. position: relative;
  27. z-index: 1;
  28. }
  29. .swiper-nav ul{
  30. padding: 30px 0;
  31. }
  32. .swiper-nav ul li{
  33. color: #fff;
  34. font-size: 14px;
  35. padding: 0 20px;
  36. height: 42px;
  37. line-height: 42px;
  38. }
  39. .swiper-nav ul li:hover{
  40. background-color: #ff6700;
  41. cursor: pointer;
  42. }
  43. .swiper-nav li i{
  44. float: right;
  45. }
  46. .swiper-content .swiper-img img{
  47. width: 1226px;
  48. height: 460px;
  49. }
  50. .swiper-content .swiper-img li{
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. display: none;
  55. }
  56. .swiper-content .swiper-img .active{
  57. display: block;
  58. }
  59. .swiper-btn .arr-btn{
  60. position: absolute;
  61. top:50%;
  62. margin-top: -35px;
  63. width: 100%;
  64. }
  65. .swiper-btn .arr-btn .left-btn{
  66. position: absolute;
  67. left: 234px;
  68. width: 41px;
  69. height: 70px;
  70. background-image: url("./image/icon-slides.png");
  71. background-position: -84px 0;
  72. }
  73. .swiper-btn .arr-btn .left-btn:hover{
  74. background-position: 0 0;
  75. cursor: pointer;
  76. }
  77. .swiper-btn .arr-btn .right-btn{
  78. position: absolute;
  79. right: 0;
  80. width: 41px;
  81. height: 70px;
  82. background-image: url("./image/icon-slides.png");
  83. background-position: -125px 0;
  84. }
  85. .swiper-btn .arr-btn .right-btn:hover{
  86. background-position: -41px 0;
  87. cursor: pointer;
  88. }
  89. .swiper-btn .dot-btn ul{
  90. position: absolute;
  91. right: 30px;
  92. bottom: 30px;
  93. }
  94. .swiper-btn .dot-btn li{
  95. width: 6px;
  96. height: 6px;
  97. background-color: rgba(0,0,0,.4);
  98. border:2px solid hsla(0,0%,100%,.3);
  99. border-radius: 50%;
  100. float: left;
  101. margin: 0 5px;
  102. }
  103. .swiper-btn .dot-btn li:hover{
  104. background: hsla(0, 0%, 100%, .4);
  105. border-color: rgba(0, 0, 0, .4);
  106. cursor: pointer;
  107. }
  108. .swiper-btn .dot-btn .active{
  109. background: hsla(0, 0%, 100%, .4);
  110. border-color: rgba(0, 0, 0, .4);
  111. }
  112. </style>
  113. </head>
  114. <body>
  115. <div class="swiper-content">
  116. <!-- 左侧导航 -->
  117. <div class="swiper-nav">
  118. <ul>
  119. <li>手机 <i class="iconfont icon-arrow"></i> </li>
  120. <li>电视 <i class="iconfont icon-arrow"></i> </li>
  121. <li>家电 <i class="iconfont icon-arrow"></i></li>
  122. <li>笔记本 平板 显示器 <i class="iconfont icon-arrow"></i></li>
  123. <li>出行 穿戴 <i class="iconfont icon-arrow"></i></li>
  124. <li>耳机 音箱 <i class="iconfont icon-arrow"></i></li>
  125. <li>健康 儿童 <i class="iconfont icon-arrow"></i></li>
  126. <li>生活 箱包 <i class="iconfont icon-arrow"></i></li>
  127. <li>智能 路由器 <i class="iconfont icon-arrow"></i></li>
  128. <li>电源 配件 <i class="iconfont icon-arrow"></i></li>
  129. </ul>
  130. </div>
  131. <!-- 轮播图 图片区域 -->
  132. <div class="swiper-img">
  133. <ul>
  134. <li class="swiper-item active">
  135. <img src="./image/slider1.jpg" alt="">
  136. </li>
  137. <li class="swiper-item">
  138. <img src="./image/slider2.jpeg" alt="">
  139. </li>
  140. <li class="swiper-item">
  141. <img src="./image/slider3.png" alt="">
  142. </li>
  143. <li class="swiper-item">
  144. <img src="./image/slider4.jpeg" alt="">
  145. </li>
  146. <li class="swiper-item">
  147. <img src="./image/slider5.jpg" alt="">
  148. </li>
  149. <li class="swiper-item">
  150. <img src="./image/slider6.jpg" alt="">
  151. </li>
  152. </ul>
  153. </div>
  154. <!-- 轮播图 按钮区域 -->
  155. <div class="swiper-btn">
  156. <div class="arr-btn">
  157. <div class="left-btn"></div>
  158. <div class="right-btn"></div>
  159. </div>
  160. <div class="dot-btn">
  161. <ul>
  162. <li class="dot-item active"></li>
  163. <li class="dot-item"></li>
  164. <li class="dot-item"></li>
  165. <li class="dot-item"></li>
  166. <li class="dot-item"></li>
  167. <li class="dot-item"></li>
  168. </ul>
  169. </div>
  170. </div>
  171. </div>
  172. <script>
  173. // 第一步获取要控制的元素
  174. // 获取小点按钮
  175. var dotItem = document.getElementsByClassName("dot-item");
  176. // 获取轮播图图片
  177. var swiperItem = document.getElementsByClassName("swiper-item");
  178. // 第二步为小圆点绑定事件
  179. for(var i=0;i<dotItem.length;i++){
  180. // 为每一个绑定事件的标签分配一个编号
  181. dotItem[i].index = i;
  182. // 为每一个按钮绑定事件
  183. dotItem[i].onclick = function(){
  184. console.log(this.index);
  185. // 第四步 移除没有被选中的轮播图及效果
  186. for(var j=0;j<dotItem.length;j++){
  187. swiperItem[j].classList.remove("active");
  188. dotItem[j].classList.remove("active");
  189. }
  190. // 第三步切换轮播图图片 及选中效果
  191. swiperItem[this.index].classList.add("active");
  192. // 给当前点击的小点加上选中效果
  193. this.classList.add("active");
  194. }
  195. }
  196. </script>
  197. </body>
  198. </html>