微信公众平台注册官网_企业在哪里查询_重庆seo网站哪家好_近三天时政热点

该轮播图有HTML，CSS，JSON，JS部分所组成，主要的核心是js部分。

该轮播图的功能有：轮播图自动轮播/鼠标放入轮播暂停/鼠标移出轮播继续/点击左右按钮切换图片/图片的防抖。

以下为HTML部分与CSS部分，就不过多赘述，主要以js不五分为主：

HTML部分：

<!-- 可视区域 --><!-- onmouseout鼠标移入停onmouseover鼠标移出动--><div class="view" onmouseout="mouseOutt()" onmouseover="mouseOverr()"><!-- 长条 --><div class="banner"></div><!-- 图片上的按钮 --><div class="button"><button class="leftBtn" onclick="moveImgL()"><img src="./img/箭头.png" alt="" /></button><button class="rightBtn" onclick="moveImgR()"><img src="./img/箭头 (2).png" alt="" /></button></div><!-- 圆点 --><div class="round"></div></div>

CSS部分：

* {margin: 0;padding: 0;}.view {width: 55vw;height: 560px;margin: auto;position: relative;overflow: hidden;background-color: aquamarine;}.banner {display: flex;height: 100%;}.banner img {width: 55vw;/* 防止图片缩小 */flex-shrink: 0;}.button {position: absolute;width: 100%;top: 50%;/* background-color: black; */display: flex;justify-content: space-between;}.leftBtn {border: none;/* background-color: transparent; */background-color: rgba(0, 0, 0, 0.5);cursor: pointer;}.rightBtn {border: none;/* background-color: transparent; */background-color: rgba(0, 0, 0, 0.5);cursor: pointer;}.round {position: absolute;/* background-color: blue; */width: 80px;height: 50px;bottom: 10px;left: 50%;display: flex;transform: translateX(-50%);}.point {width: 10px;height: 10px;background-color: gray;margin: 3px;/* border-radius: 50%; */cursor: pointer;}

JS部分：

1.全局声明：以下声明放到全局

// 图的下标let k = 0;//数据let data;//定时器，后续用来清空let inter;//图片的宽度let imgWidth;//获取可视区域let view = document.getElementsByClassName('view')[0];//获取长条（放图片的地方）let banner = document.getElementsByClassName('banner')[0];//获取圆点框架let round = document.getElementsByClassName('round')[0];//圆点let point;

2.AJAX部分,访问json文件并获取到里面的数据。

let xhr = new XMLHttpRequest();xhr.open('get', './js/bannerCenter.json', true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;console.log(text);data = JSON.parse(text);console.log(data);// 渲染函数show(data);console.log(data);}};

3.渲染函数，通过调用渲染函数实现页面的更新：

function show(data) {// 拼图片let imgStr = '';// 拼圆点let pointStr = '';for (let i = 0; i < data.length; i++) {imgStr += `<img src="${data[i]}" alt="" class="imgW"/>`;// 循环拼接圆点（有几个图就有几个图就拼几个点）如果是第一个就变色if (i == 0) {pointStr += `<div class="point" style="background-color: red;"></div>`} else {//否则就不是第一个就换回原来的颜色pointStr += `<div class="point" style="background-color: gray;"></div>`}}console.log(imgStr);// 循环外再拼一张为首图imgStr += `<img src="${data[0]}" alt="" />`;//拼好图的往banner里放banner.innerHTML = imgStr;//拼接好的点往round放round.innerHTML = pointStr;//获取所有圆点point = document.getElementsByClassName('point');// 获取图片宽度imgWidth = document.getElementsByClassName('imgW')[0].offsetWidth;console.log(imgWidth);// 定时器，用来位移inter = setInterval(moveImg, 2000);}

4.平移函数：图片的位移逻辑都在这里面，后续通过定时器可以设置执行这个函数的时间周期.

function moveImg() {// 图片下标+1k++;// 平移样式banner.style.transition = "transform 1s ease"// 平移的尺度banner.style.transform = `translate(-${k * imgWidth}px)`;// 如果k大于长度说明超出了if (k > data.length - 1) {// 上定时器。有一个时间（短的话图片会抖，长的话会超出不显示图片）从最后一个图片闪到第一张setTimeout(function() {// 清零k = 0;// 回到第一张banner.style.transform = `translate(-${k*imgWidth}px)`;// 清除样式banner.style.transition = "none";}, 1000);}//圆点的右位移// 如果k小于圆点的长度，说明还没到最后一个位置if (k < point.length) {point[k].style.background = "red";point[k - 1].style.background = "gray";} else if (k == point.length) {//否则就到达了最后位置point[0].style.background = "red";point[k - 1].style.background = "gray";}}

5.鼠标事件函数，鼠标放到图上，轮播暂停。

function mouseOverr() {clearInterval(inter);}

6.鼠标事件函数，鼠标移到图片外，轮播继续.

function mouseOutt() {//设置定时器，每两秒执行平移函数inter = setInterval(moveImg, 2000);}

7.获取左右箭头，及初始化点击状态，方便后续进行一系列操作

// 获取左右箭头，后续绑定事件let leftBtn = document.getElementsByClassName('leftBtn')let rightBtn = document.getElementsByClassName('rightBtn')//点击状态，初始为false未点击let clicked = false;

8.左按钮的点击事件函数：

function moveImgL() {// 先判断按钮是否被点击if (clicked) {return;}// 标记为已被点击clicked = true;//如果是第一张的话就重新赋值if (k == 0) {// 让k等于5（data的长度）k = data.length;// 在平移五张的宽度,从第一张到第五张banner.style.transform = `translate(-${k*imgWidth}px)`;// 把平移的样式去掉，为了不让用户看出来闪的时候banner.style.transition = "none";//如果不去掉的话就是下面的样子// banner.style.transition = "transform 1s ease"}//点左箭头平移的响应时间10mssetTimeout(function() {k--;banner.style.transform = `translate(-${k*imgWidth}px)`;//ch重新上过度样式banner.style.transition = "transform 1s ease"//圆点的左位移//data.length - 1最后一个位置if (k == data.length - 1) {point[k].style.background = "red";point[0].style.background = "gray";} else {point[k].style.background = "red";point[k + 1].style.background = "gray";}}, 10);//恢复点击事件按的定时器setTimeout(function() {clicked = false;}, 800);}

9.右按钮的点击事件函数：
以为他的逻辑和平移函数一样，所以直接在里面调用平移函数。

function moveImgR() {// 先判断按钮是否被点击if (clicked) {return;}//跟轮播的效果一样moveImg();// 标记为已被点击clicked = true;setTimeout(function() {clicked = false;}, 1000);}

JSON部分：

图片的路径即可

["./img/bmw1.jpg","./img/bmw2.jpg","./img/bmw3.jpg","./img/bmw4.jpg","./img/bmw5.jpg"
]

全部代码的合并：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style>* {margin: 0;padding: 0;}.view {width: 55vw;height: 560px;margin: auto;position: relative;overflow: hidden;background-color: aquamarine;}.banner {display: flex;height: 100%;}.banner img {width: 55vw;/* 防止图片缩小 */flex-shrink: 0;}.button {position: absolute;width: 100%;top: 50%;/* background-color: black; */display: flex;justify-content: space-between;}.leftBtn {border: none;/* background-color: transparent; */background-color: rgba(0, 0, 0, 0.5);cursor: pointer;}.rightBtn {border: none;/* background-color: transparent; */background-color: rgba(0, 0, 0, 0.5);cursor: pointer;}.round {position: absolute;/* background-color: blue; */width: 80px;height: 50px;bottom: 10px;left: 50%;display: flex;transform: translateX(-50%);}.point {width: 10px;height: 10px;background-color: gray;margin: 3px;/* border-radius: 50%; */cursor: pointer;}</style></head><body><!-- 可视区域 --><!-- onmouseout鼠标移入停onmouseover鼠标移出动--><div class="view" onmouseout="mouseOutt()" onmouseover="mouseOverr()"><!-- 长条 --><div class="banner"></div><!-- 图片上的按钮 --><div class="button"><button class="leftBtn" onclick="moveImgL()"><img src="./img/箭头.png" alt="" /></button><button class="rightBtn" onclick="moveImgR()"><img src="./img/箭头 (2).png" alt="" /></button></div><!-- 圆点 --><div class="round"></div></div><script>// 图的下标let k = 0;//数据let data;//定时器，后续用来清空let inter;//图片的宽度let imgWidth;//获取可视区域let view = document.getElementsByClassName('view')[0];//获取长条（放图片的地方）let banner = document.getElementsByClassName('banner')[0];//获取圆点框架let round = document.getElementsByClassName('round')[0];//圆点let point;let xhr = new XMLHttpRequest();xhr.open('get', './js/bannerCenter.json', true);xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {let text = xhr.responseText;console.log(text);data = JSON.parse(text);console.log(data);// 渲染函数show(data);console.log(data);}};// 渲染函数function show(data) {// 拼图片let imgStr = '';// 拼圆点let pointStr = '';for (let i = 0; i < data.length; i++) {imgStr += `<img src="${data[i]}" alt="" class="imgW"/>`;// 循环拼接圆点（有几个图就有几个图就拼几个点）如果是第一个就变色if (i == 0) {pointStr += `<div class="point" style="background-color: red;"></div>`} else {//否则就不是第一个就换回原来的颜色pointStr += `<div class="point" style="background-color: gray;"></div>`}}console.log(imgStr);// 循环外再拼一张为首图imgStr += `<img src="${data[0]}" alt="" />`;//拼好图的往banner里放banner.innerHTML = imgStr;//拼接好的点往round放round.innerHTML = pointStr;//获取所有圆点point = document.getElementsByClassName('point');// 获取图片宽度imgWidth = document.getElementsByClassName('imgW')[0].offsetWidth;console.log(imgWidth);// 定时器，用来位移inter = setInterval(moveImg, 2000);}// 平移函数function moveImg() {// 图片下标+1k++;// 平移样式banner.style.transition = "transform 1s ease"// 平移的尺度banner.style.transform = `translate(-${k * imgWidth}px)`;// 如果k大于长度说明超出了if (k > data.length - 1) {// 上定时器。有一个时间（短的话图片会抖，长的话会超出不显示图片）从最后一个图片闪到第一张setTimeout(function() {// 清零k = 0;// 回到第一张banner.style.transform = `translate(-${k*imgWidth}px)`;// 清除样式banner.style.transition = "none";}, 1000);}//圆点的右位移// 如果k小于圆点的长度，说明还没到最后一个位置if (k < point.length) {point[k].style.background = "red";point[k - 1].style.background = "gray";} else if (k == point.length) {//否则就到达了最后位置point[0].style.background = "red";point[k - 1].style.background = "gray";}}//鼠标入，停function mouseOverr() {clearInterval(inter);}//鼠标出，动function mouseOutt() {inter = setInterval(moveImg, 2000);}// 获取左右箭头，后续绑定事件let leftBtn = document.getElementsByClassName('leftBtn')let rightBtn = document.getElementsByClassName('rightBtn')//点击状态，初始为false未点击let clicked = false;//左按钮点击事件function moveImgL() {// 先判断按钮是否被点击if (clicked) {return;}// 标记为已被点击clicked = true;//如果是第一张的话就重新赋值if (k == 0) {// 让k等于5（data的长度）k = data.length;// 在平移五张的宽度,从第一张到第五张banner.style.transform = `translate(-${k*imgWidth}px)`;// 把平移的样式去掉，为了不让用户看出来闪的时候banner.style.transition = "none";//如果不去掉的话就是下面的样子// banner.style.transition = "transform 1s ease"}//点左箭头平移的响应时间10mssetTimeout(function() {k--;banner.style.transform = `translate(-${k*imgWidth}px)`;//ch重新上过度样式banner.style.transition = "transform 1s ease"//圆点的左位移//data.length - 1最后一个位置if (k == data.length - 1) {point[k].style.background = "red";point[0].style.background = "gray";} else {point[k].style.background = "red";point[k + 1].style.background = "gray";}}, 10);//恢复点击事件按的定时器setTimeout(function() {clicked = false;}, 800);}//右按钮点击事件function moveImgR() {// 先判断按钮是否被点击if (clicked) {return;}//跟轮播的效果一样moveImg();// 标记为已被点击clicked = true;setTimeout(function() {clicked = false;}, 1000);}</script></body>
</html>