原生js编写一个图片幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:原生js编写一个图片幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function animation(obj, target, callback) {//obj要实现的那个元素, target目标位置 clearInterval(obj.timer);//清除以前的定时器,只保留当前的 obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); //回调函数 callback && callback(); } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 15); } window.addEventListener('load', function () { var banner = document.querySelector('.banner'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var circle = document.querySelector('.gd'); var bannerWidth = banner.offsetWidth; var ul = banner.querySelector('ul'); var num = 0; //鼠标移动盒子内让按钮显示 banner.addEventListener('mouseenter', function () { prev.style.display = 'block'; next.style.display = 'block'; clearInterval(autoPlay); autoPlay = null;//清除定时器 }) banner.addEventListener('mouseleave', function () { prev.style.display = 'none'; next.style.display = 'none'; autoPlay = setInterval(function () { //手动调用点击事件 next.click(); }, 2000); }); //设置ul的宽度 var nums = ul.children.length; ul.style.width = nums * bannerWidth + 'px'; //动态创建底部小圆点 for (var k = 0; k < nums; k++) { let i = document.createElement('i'); circle.appendChild(i); i.setAttribute('index', k); i.addEventListener('click', function () { num = this.getAttribute('index'); animation(ul, -num * bannerWidth); currents(); }); } //为按钮prev,next加事件 circle.children[num].className = 'current'; //判断有没有执行完动画 var flag = true; next.addEventListener('click', function () { if (flag) { flag = false; if (num == nums - 1) { animation(ul, 0); num = 0; flag = true; } else { num++; animation(ul, -num * bannerWidth, function () { flag = true; }); } currents(); } }); prev.addEventListener('click', function () { if (flag) { flag = false; if (num == 0) { animation(ul, -nums * bannerWidth - 1); num = nums - 1; flag = true; } else { num--; animation(ul, -num * bannerWidth, function () { flag = true; }); } currents(); } }); function currents() { for (var a = 0; a < nums; a++) { circle.children[a].className = ''; } circle.children[num].className = 'current'; } //无缝播放 var li = ul.children[0].cloneNode(true); ul.appendChild(li); //自动播放 var autoPla.........完整代码请登录后点击上方下载按钮下载查看
网友评论0