实现一个电商页面中的广告轮流播放的框框内容 主要包括以下几个功能:
1.鼠标移入广告内出现左右点击按钮 点击按钮可左(右)查看 上(下)一个广告图片 鼠标移出广告后 点击按钮隐藏;
2.广告下方有对应广告图片个数的索引标记点,根据当前播放的图片相应索引标记点样式改变 ;
3.鼠标放在相应索引标记点可直接动画跳转到相应广告图片;
4.鼠标不经过广告内时广告自动轮流播放;
5.鼠标经过广告内广告自动播放停止.
HTML结构:
<div class="middle" id="lunfandiv">
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<a href="javascript:;" class="arrow_l">
< </a>
<a href="javascript:;" class="arrow_r">></a>
<ol class="circle">
</ol>
</div>
插入的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 < ul.children.length; i++) {
let li = document.createElement('li');
olcircle.appendChild(li);
if (i == 0) {
olcircle.children[i].className = 'currentwhite';
}
//给每个小点添加鼠标放上时候的事件
olcircle.children[i].addEventListener('mouseenter', function() {
//鼠标放在小点上对应小点样式改变 动画跳转到对应索引号所在的广告图片
for (let j = 0; j < olcircle.children.length; j++) {
olcircle.children[j].className = 'notcurrent';
}
animate(ul, i * (-721));
//把箭头的索引号和这个索引号同步
num = i;
olcircle.children[i].className = 'currentwhite';
});
}
//把第一个图片赋值放在ul最后一个
let newli = ul.children[0].cloneNode(true);
ul.appendChild(newli);
//保证按下箭头动画连续性 首先把第一张图片复制一个一样的li放在ul最后(真实的是有n+1图片 ,显示出来看着有n个图片)
//第一个左跳到所谓的最后一个图片
arrow_l.addEventListener('click', function() {
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 < olcircle.children.length; j++) {
olcircle.children[j].className = 'notcurrent';
}
olcircle.children[num].className = 'currentwhite';
console.log(num);
});
//最后一个右跳 到第一个图片
arrow_r.addEventListener('click', function() {
//如果是在第一个图片那么再右跳之前一定要先定位到第一张图片
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 < olcircle.children.length; j++) {
olcircle.children[j].className = 'notcurrent';
}
olcircle.children[num].className = 'currentwhite';
});
let timer = setInterval(function() {
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搭建效果如下
由于动画过程上传不了 大家自行脑补或者 自己运行一下.