设为首页收藏本站
开启辅助访问

焦点轮播图效果实现

 您所在的位置：网站首页 › 焦点图效果 › 焦点轮播图效果实现

焦点轮播图效果实现

2024-02-16 20:24| 来源: 网络整理| 查看: 265

　　焦点轮播图相对前面讲的逐帧轮播图实现多了两个功能，1、图片轮播可以手动滚动（新增左右箭头），这里重点是实现向左滚动的无缝连接。2、多了下方小圆点，指示图片播放位置，并可以点击小圆点跳转。

　　那么如何实现呢？

　　1、无缝连接：

　　前面逐帧轮播图向右滚动的无缝连接实现，是将最后一张图片负值一个副本放在第一个位置。同理，实现向左无缝滚动，只需将第一张图片负值一个副本放置在最后的位置即可。形成 5  1  2 3 4 5 1这样的图片排序。同样将7张图片放在一个div下，轮播时播放变换div位置即可。

HTML代码如下：

　css代码如下：

* { padding: 0; margin: 0; } li { list-style: none; } .container { width: 800px; height: 600px; margin: 20px auto; position: relative; overflow: hidden; border: 3px double red; border-radius: 2%; } .imgs { position: absolute; display: flex; left: -800px; } #leftPo { display: inline-block; width: 30px; height: 30px; background-image: url('../img/left.png'); position: absolute; top: 285px; left: 20px; z-index: 1; cursor: pointer; opacity: 0; transition: all linear .5s } #rightPo { display: inline-block; width: 30px; height: 30px; background-image: url('../img/right_03.png'); position: absolute; top: 285px; right: 20px; z-index: 1; cursor: pointer; opacity: 0; transition: all linear .5s } #oul { /* opacity: 0; transition: all linear .5s; */ position: absolute; bottom: 20px; left: 350px; display: flex; } .circle { width: 20px; height: 20px; border-radius: 50%; background-color: white; margin-left: 10px; cursor: pointer; }

　　2、小圆点设置

　　首先创建小圆点（在前面css里面优先创建了一个类名为circle的样式设置）：

let imgs = document.getElementById('imgs'); let oi = document.getElementsByTagName('I'); let img = document.getElementsByTagName('IMG'); let oul = document.getElementById('oul'); let stopTimer1, stopTimer; // 创建圆圈 for (let i = 0; i < img.length - 2; i++) { let newli = document.createElement('li'); newli.className = 'circle'; oul.appendChild(newli); } let lis = document.getElementsByTagName('LI'); // 初识第一张图片显示，给第一个圆圈选中样式 lis[0].style.width = '30px'; lis[0].style.height = '30px'; // 原点大小判断 let circle = function (lis) { for (let i = 0; i < lis.length; i++) { if (i == (imgs.offsetLeft) / (-800)) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else { lis[i].style.width = '20px'; lis[i].style.height = '20px'; } } }

　　在这里我给了1个初识值，即刷新页面后显示的第一张图片，对应的第一个小圆点将变大。然后创建了一个变化小圆点的函数，方便后面调用。

　　然后给一个for循环，当小圆点点击的时候，就跳转到对应图片上。

// 循环判断点击 for (let j = 0; j < lis.length; j++) { lis[j].onclick = function () { imgs.style.left = -800 * j - 800 + 'px'; for (let i = 0; i < lis.length; i++) { if (i == j) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else { lis[i].style.width = '20px'; lis[i].style.height = '20px'; } } } }

　　

　　3、div整体图片移动函数建立，在这里给了函数一个参数speed，用于存储移动的方向及速度。

// 移动的回调函数 let move1 = function (speed) { // 图片轮播 stopTimer1 = setInterval(function () { imgs.style.left = imgs.offsetLeft + speed + 'px'; // 当第5张播放到 5图片时，直接跳转到位于第一个的备份 5图片，这样就造成了一直无空隙播放的假象 // 判断的值 -4000为 5图片前面 共计五张图片的宽的和，然后直接跳转到left为0. if (imgs.offsetLeft = 0) { imgs.style.left = -img[0].offsetWidth * (img.length - 2) + 'px'; } if (imgs.offsetLeft % img[0].offsetWidth == 0) { clearInterval(stopTimer1); } }, 10) circle(lis); }

　　4、建立整体移动的主函数，即程序入口。

// 每隔7秒调用1次，7秒等于 图片移动的4秒（800px，每10ms移动2px）+ 停顿的 3秒 let moveAll = function () { let stopTimer = setInterval(function () { rightPo.onclick(); }, 7000); // 鼠标放在图片区域时停止滚动、并且左右箭头变为不透明，移开时移动，并且左右箭头变为透明 container.onmousemove = function () { leftPo.style.opacity = '0.8'; rightPo.style.opacity = '0.8'; // oul.style.opacity = '0.8'; clearInterval(stopTimer); } container.onmouseout = function () { leftPo.style.opacity = '0'; rightPo.style.opacity = '0'; // oul.style.opacity = '0'; moveAll(); } } moveAll();

　　5、左右箭头点击跳转，传入方向和速度进行移动

// 点击激活，每次点击后先清除计时器，防止多次点击同一个按钮后乱窜 leftPo.onclick = function () { clearInterval(stopTimer1); move1(20); } rightPo.onclick = function () { clearInterval(stopTimer1); move1(-20); }

　

 

 

 

 

完整代码如下：

Document * { padding: 0; margin: 0; } li { list-style: none; } .container { width: 800px; height: 600px; margin: 20px auto; position: relative; overflow: hidden; border: 3px double red; border-radius: 2%; } .imgs { position: absolute; display: flex; left: -800px; } #leftPo { display: inline-block; width: 30px; height: 30px; background-image: url('../img/left.png'); position: absolute; top: 285px; left: 20px; z-index: 1; cursor: pointer; opacity: 0; transition: all linear .5s } #rightPo { display: inline-block; width: 30px; height: 30px; background-image: url('../img/right_03.png'); position: absolute; top: 285px; right: 20px; z-index: 1; cursor: pointer; opacity: 0; transition: all linear .5s } #oul { /* opacity: 0; transition: all linear .5s; */ position: absolute; bottom: 20px; left: 350px; display: flex; } .circle { width: 20px; height: 20px; border-radius: 50%; background-color: white; margin-left: 10px; cursor: pointer; } window.onload = function () { let imgs = document.getElementById('imgs'); let oi = document.getElementsByTagName('I'); let img = document.getElementsByTagName('IMG'); let oul = document.getElementById('oul'); let stopTimer1, stopTimer; // 创建圆圈 for (let i = 0; i < img.length - 2; i++) { let newli = document.createElement('li'); newli.className = 'circle'; oul.appendChild(newli); } let lis = document.getElementsByTagName('LI'); // 初识第一张图片显示，给第一个圆圈选中样式 lis[0].style.width = '30px'; lis[0].style.height = '30px'; // 原点大小判断 let circle = function (lis) { for (let i = 0; i < lis.length; i++) { if (i == (imgs.offsetLeft) / (-800)) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else if ((imgs.offsetLeft) / (-800) == -1 && i == 4) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else { lis[i].style.width = '20px'; lis[i].style.height = '20px'; } } } // 移动的回调函数 let move1 = function (speed) { // 图片轮播 stopTimer1 = setInterval(function () { imgs.style.left = imgs.offsetLeft + speed + 'px'; // 当第5张播放到 5图片时，直接跳转到位于第一个的备份 5图片，这样就造成了一直无空隙播放的假象 // 判断的值 -4000为 5图片前面 共计五张图片的宽的和，然后直接跳转到left为0. if (imgs.offsetLeft = 0) { imgs.style.left = -img[0].offsetWidth * (img.length - 2) + 'px'; } if (imgs.offsetLeft % img[0].offsetWidth == 0) { clearInterval(stopTimer1); } }, 10) circle(lis); } // 点击激活，每次点击后先清除计时器，防止多次点击同一个按钮后乱窜 leftPo.onclick = function () { clearInterval(stopTimer1); move1(20); } rightPo.onclick = function () { clearInterval(stopTimer1); move1(-20); } // 每隔7秒调用1次，7秒等于 图片移动的4秒（800px，每10ms移动2px）+ 停顿的 3秒 let moveAll = function () { let stopTimer = setInterval(function () { rightPo.onclick(); }, 7000); // 鼠标放在图片区域时停止滚动、并且左右箭头变为不透明，移开时移动，并且左右箭头变为透明 container.onmousemove = function () { leftPo.style.opacity = '0.8'; rightPo.style.opacity = '0.8'; // oul.style.opacity = '0.8'; clearInterval(stopTimer); } container.onmouseout = function () { leftPo.style.opacity = '0'; rightPo.style.opacity = '0'; // oul.style.opacity = '0'; moveAll(); } } moveAll(); // 循环判断点击 for (let j = 0; j < lis.length; j++) { lis[j].onclick = function () { imgs.style.left = -800 * j - 800 + 'px'; for (let i = 0; i < lis.length; i++) { if (i == j) { lis[i].style.width = '30px'; lis[i].style.height = '30px'; } else { lis[i].style.width = '20px'; lis[i].style.height = '20px'; } } } } }

　　

　　



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3