.
O
K
A
Y
A

web APIs---定时器轮播图

 

10.24修改。

进行了代码的完善，鼠标悬停轮播图停止和点击左右按钮调整图片信息

二改

添加了点击li圆点切换图片的效果

 

10.20修改。

今天改了下思路 在添加高亮圆点前进行一个旧圆点的删除。

通过获取到已经被添加高亮的圆点

然后进行删除。

 

附源代码 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8" />
  6   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8   <title>轮播图点击切换</title>
  9   <style>
 10     * {
 11       box-sizing: border-box;
 12     }
 13 
 14     .slider {
 15       width: 560px;
 16       height: 400px;
 17       overflow: hidden;
 18     }
 19 
 20     .slider-wrapper {
 21       width: 100%;
 22       height: 320px;
 23     }
 24 
 25     .slider-wrapper img {
 26       width: 100%;
 27       height: 100%;
 28       display: block;
 29     }
 30 
 31     .slider-footer {
 32       height: 80px;
 33       background-color: rgb(100, 67, 68);
 34       padding: 12px 12px 0 12px;
 35       position: relative;
 36     }
 37 
 38     .slider-footer .toggle {
 39       position: absolute;
 40       right: 0;
 41       top: 12px;
 42       display: flex;
 43     }
 44 
 45     .slider-footer .toggle button {
 46       margin-right: 12px;
 47       width: 28px;
 48       height: 28px;
 49       appearance: none;
 50       border: none;
 51       background: rgba(255, 255, 255, 0.1);
 52       color: #fff;
 53       border-radius: 4px;
 54       cursor: pointer;
 55     }
 56 
 57     .slider-footer .toggle button:hover {
 58       background: rgba(255, 255, 255, 0.2);
 59     }
 60 
 61     .slider-footer p {
 62       margin: 0;
 63       color: #fff;
 64       font-size: 18px;
 65       margin-bottom: 10px;
 66     }
 67 
 68     .slider-indicator {
 69       margin: 0;
 70       padding: 0;
 71       list-style: none;
 72       display: flex;
 73       align-items: center;
 74     }
 75 
 76     .slider-indicator li {
 77       width: 8px;
 78       height: 8px;
 79       margin: 4px;
 80       border-radius: 50%;
 81       background: #fff;
 82       opacity: 0.4;
 83       cursor: pointer;
 84     }
 85 
 86     .slider-indicator li.active {
 87       width: 12px;
 88       height: 12px;
 89       opacity: 1;
 90     }
 91   </style>
 92 </head>
 93 
 94 <body>
 95   <div class="slider">
 96     <div class="slider-wrapper">
 97       <img src="./images/slider01.jpg" alt="" />
 98     </div>
 99     <div class="slider-footer">
100       <p>对人类来说会不会太超前了？</p>
101       <ul class="slider-indicator">
102         <li class="active"></li>
103         <li></li>
104         <li></li>
105         <li></li>
106         <li></li>
107         <li></li>
108         <li></li>
109         <li></li>
110       </ul>
111       <div class="toggle">
112         <button class="prev">&lt;</button>
113         <button class="next">&gt;</button>
114       </div>
115     </div>
116   </div>
117   <script>
118     // 1. 初始数据
119     const sliderData = [
120       { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
121       { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
122       { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
123       { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
124       { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
125       { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
126       { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
127       { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
128     ]
129     // 获取img标签
130     const img = document.querySelector('img')
131     // 获取p标签
132     const p = document.querySelector('.slider-footer p')
133     // 获取背景色div
134     const div = document.querySelector('.slider-footer')
135     // 获取圆点
136     const li = document.querySelectorAll('.slider-indicator li')
137     // 获取盒子
138     const box = document.querySelector('.slider')
139 
140 
141     // 定义变量
142     let i = 0
143     // 左按钮点击函数
144     function imgD() {
145       i++
146       // 轮播图长度判断
147       if (i >= sliderData.length) {
148         i = 0
149       }
150       imgRender(i)
151     }
152     // 右按钮点击函数
153     function imgL() {
154       i--
155       // 轮播图长度判断
156       if (i <= 0) {
157         i = sliderData.length - 1
158       }
159       imgRender(i)
160     }
161     // 图片渲染函数
162     function imgRender(a) {
163       // 删除已存在圆点
164       document.querySelector('.active').classList.remove('active')
165       // 添加圆点
166       li[a].classList.add('active')
167       // 赋值
168       div.style.backgroundColor = sliderData[a].color
169       img.src = sliderData[a].url
170       p.innerHTML = sliderData[a].title
171     }
172     // 随机数
173     function getRandom(min, max) {
174       min = Math.ceil(min);
175       max = Math.floor(max);
176       return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
177     }
178 
179     // 左按钮点击
180     const rightD = document.querySelector('.next').addEventListener('click', imgD)
181     // rightD.addEventListener('click', imgD)
182     // 右按钮点击
183     const rightL = document.querySelector('.prev').addEventListener('click', imgL)
184     // rightL.addEventListener('click', imgL)
185     // 定时器函数调用
186     let bb = setInterval(imgD, 2000)
187     // li点击事件调用
188     for (let j = 0; j < li.length; j++) {
189       li[j].addEventListener('click', function () {
190         imgRender(j)
191         i = j
192       })
193     }
194     // 鼠标移入
195     box.addEventListener('mouseenter', function () {
196       clearInterval(bb)
197     })
198     // 鼠标移出
199     box.addEventListener('mouseleave', function () {
200       bb = setInterval(imgD, 2000)
201     })
202 
203 
204 
205 
206 
207   </script>
208 </body>
209 
210 </html>

 

posted @ 2022-10-15 21:15  三井绫子  阅读(27)  评论(0)  编辑  收藏  举报