admin 管理员组

文章数量: 1184232

轮播图。。

结构：

img-list : 图片列表

radio-list : 圆点 列表

<div class="root"><ul class="img-list"><li class="img-item active">1</li><li class="img-item">2</li><li class="img-item">3</li></ul><ul class="radioList"><li class="radio-item active" data-index=1></li><li class="radio-item" data-index=2></li><li class="radio-item" data-index=3></li></ul><button>《= </button><button> =》</button></div>

样式：

 <style>* {padding: 0;margin: 0;}.root {width: 800px;height: 400px;border: 1px solid black;margin: 0% auto;position: relative; }.img-list {width: 800px;height: 400px;position: absolute;}.img-item {width: 100%;height: 100%;list-style-type: none;position: absolute;transition: all 1s}.img-item.active {z-index: 50;}.img-list .img-item:nth-child(1) {background-color: pink;}.img-list .img-item:nth-child(2) {background-color: beige;}.img-list .img-item:nth-child(3) {background-color: navajowhite;}.radioList {position: absolute;bottom: 0;left: calc(50% - 100px);display: flex;justify-content: center;align-items: center;width: 200PX;height: 40px;background-color: aliceblue;z-index: 200;}.radio-item {width: 30PX;height: 30px;margin: 0px 5px;cursor: pointer;border-radius: 50%;background-color: pink;list-style-type: none;transition: all .8s}.radio-item.active {background-color: rgb(208, 84, 104);}button {position: absolute;z-index: 100;cursor: pointer;}.root button:first-of-type {left: 0%;top: 50%;}.root button:last-child {top: 50%;right: 0%;}</style>
<script>// 索引let index = 0let id = ''let imgList = document.getElementsByClassName('img-item')let radioList = document.getElementsByClassName('radio-item')let buttonList = document.getElementsByTagName('button')let root = document.getElementsByClassName('root')// 后退buttonList[0].addEventListener('click', function () {jianjian()})// 前进buttonList[1].addEventListener('click', function () {add()})// 移入停止滚动root[0].onmousemove = function () {clearInterval(id)}// 移除开始滚动root[0].onmouseleave = function () {play()}// 小圆点点击切换图片for (let i in radioList) {radioList[i].onclick = function () {index = iactive()}}// 移除激活function deAcive () {for (let i of radioList) {i.className = 'radio-item'}for (let i of imgList) {i.className = 'img-item'}}// 添加激活function active () {deAcive()radioList[index].className = 'radio-item active'imgList[index].className = 'img-item active'}// 前进function add () {if (index >= radioList.length - 1) {index = 0}else { index++ }active()}// 后退function jianjian () {if (index <= 0) {index = radioList.length - 1console.log(index)}else { index-- }active()}function play () {id = setInterval(() => {add()}, 1500)}play()</script>

思路： 图片列表相对定位，图片成员通过设置绝对定位堆叠在一起；通过Z-index控制最上方的图片；创建图片和小圆点的Active样式 => 当带有Acitve的图片的z-index值会比其他图片层级高，这样即可实现图片切换，小圆点的激活样式：颜色变重。

Script: 

1. 创建变量：Index接受索引，创建id接受定时器。

创建激活/失活函数用来添加 / 清空 .active Class。

        失活：遍历小圆点、图片列表，使其ClassName去除‘Active'

        激活：对指定索引的小圆点&&图片添加‘Active'

分析轮播图功能模块

1. 前进后退

        前进 ：index++后 ，调用激活函数切换图片

        后退：同上。

2.图片自动滚动 、鼠标移入停止，移出重启

        自动滚动：通过定时器设定前进频率：

        移入：删除定时器

        移除：重启定时器

3.点击小圆点切换对应图片

       由于有几张图片就有几个小圆点，故点击小圆点时 index 赋值 小圆点的索引 => 对应图片则会切换。

本文标签： 轮播图

版权声明：本文标题：轮播图。。 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1688189897a189994.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。