广告轮播图 javascript代码实现 |
您所在的位置：网站首页 › dw图片轮播代码 › 广告轮播图 javascript代码实现 |
广告轮播图 javascript代码实现
|
实现一个电商页面中的广告轮流播放的框框内容 主要包括以下几个功能: 1.鼠标移入广告内出现左右点击按钮 点击按钮可左(右)查看 上(下)一个广告图片 鼠标移出广告后 点击按钮隐藏; 2.广告下方有对应广告图片个数的索引标记点,根据当前播放的图片相应索引标记点样式改变 ; 3.鼠标放在相应索引标记点可直接动画跳转到相应广告图片; 4.鼠标不经过广告内时广告自动轮流播放; 5.鼠标经过广告内广告自动播放停止. HTML结构: ; ;插入的js代码: window.addEventListener('load', function() { //广告轮播图 { //移动动画animate函数 function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { //用这个step可以让动画移动的速度逐渐减缓 step = (target - obj.offsetLeft) / 10; //对移动步伐进行取整保证可以移动到准确位置 左移 为负 向下取整, 右移为正 向上取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); if (callback) { callback(); } } else { obj.style.left = obj.offsetLeft + step + 'px'; } }, 15); } let middlediv = document.querySelector('#lunfandiv'); console.log(middlediv); let arrow_l = document.querySelector('.arrow_l'); console.log(arrow_l); let arrow_r = document.querySelector('.arrow_r'); console.log(arrow_r); let num = 0; let wait = 0; let ul = middlediv.querySelector('ul'); let olcircle = document.querySelector('.circle'); //广告轮播图超出部分隐藏 middlediv.style.overflow = 'hidden'; //根据广告个数生成下面选择小点的个数 for (let i = 0; i olcircle.children[i].className = 'currentwhite'; } //给每个小点添加鼠标放上时候的事件 olcircle.children[i].addEventListener('mouseenter', function() { //鼠标放在小点上对应小点样式改变 动画跳转到对应索引号所在的广告图片 for (let j = 0; j if (num > 0) { num--; animate(ul, num * (-721)); } else { //第一个左跳最后一个,跳之前先直接设置成真实的最后一张 再animate 就实现了左跳 ul.style.left = (-4 * 721) + 'px'; num = 3; animate(ul, num * (-721)); } //跳的同时选择小点也跟随变化 for (let j = 0; j //如果是在第一个图片那么再右跳之前一定要先定位到第一张图片 if (num == 0) { ul.style.left = 0 + 'px'; } if (num >= 3) { //先直接跳到真实的最后一个图片 所谓的最后一个其实是倒数第二个 然后根据下一次情况来看 如果是左跳会改变,右跳也会先判断 animate(ul, 4 * (-721)); num = 0; } else { num++; animate(ul, num * (-721)); } //跳的同时选择小点也跟随变化 for (let j = 0; j arrow_r.click(); }, wait + 3000); //鼠标放在div上左右箭头按钮显示 middlediv.addEventListener('mouseenter', function() { arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; }); //鼠标在离开div左右箭头按钮隐藏 middlediv.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; timer = setInterval(function() { arrow_r.click(); }, wait + 3000); }); } });CSS渲染内容省略 ,HTML和CSS搭建效果如下 |
由于动画过程上传不了 大家自行脑补或者 自己运行一下.【本文地址】
今日新闻 |
推荐新闻 |