html -----------------------------------------------
<section class="banner">
<ul>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
<li> <a href="javascript:;"><img src="./uploads//banner_1.png" alt=""></a> </li>
</ul> <!-- 焦点图 ending-->
<!-- 左右箭头 -->
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
<!-- 轮播图指示器 -->
<ol class="indicator">
</ol>
</section>
css ------------------------------------------------------------
.banner {
position: relative;
width: 1240px;
height: 500px;
overflow: hidden;
}
.banner ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.banner ul li {
float: left;
}
/* -----------------------轮播图左右箭头 */
.banner .prev,
.banner .next {
position: absolute;
top: 228px;
left: 260px;
display: none;
width: 45px;
height: 45px;
/* background-color: rgba(0,0,0,.2); */
background: rgba(0,0,0,.2) url('../images/sprites.png') 14px -60px;
border-radius: 50%;
}
.banner .next {
left: 1185px;
background-position: -23px -60px;
}
/* -------------------轮播图指示器 */
.indicator {
position: absolute;
left: 672px;
bottom: 31px;
}
.indicator li {
float: left;
width: 10px;
height: 10px;
margin: 0 8px;
background-color: rgba(255,255,255,.4);
border-radius: 50%;
}
.indicator li.active {
background-color: #fff;
}
animate.js 封装的移动动画 ------------------------------------------------------------
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
js 文件 ------------------------------------------------------------
window.addEventListener('load', function() {
// alert('11')
var banner = document.querySelector('.banner')
var prev = document.querySelector('.prev')
var next = document.querySelector('.next')
// banner 的宽度
var bannerWidth = banner.offsetWidth
// 1. 鼠标经过banner 就显示隐藏左右按钮 mouseenter
banner.addEventListener('mouseenter', function() {
prev.style.display = 'block';
next.style.display = 'block';
// 停止自动轮播 清除定时器
clearInterval(timer);
timer = null; // 清除定时器变量
})
// 1. mouselesve 鼠标离开 左右箭头隐藏
banner.addEventListener('mouseleave', function() {
prev.style.display = 'none';
next.style.display = 'none';
// 鼠标离开,轮播图自动播放
timer = setInterval(() => {
// 手动调用点击事件
next.click();
}, 3000);
})
// 2. 动态生成小圈圈 active
var ul = banner.querySelector('ul');
var ol = banner.querySelector('ol');
// console.log(ul.children.length);
for(var i = 0; i < ul.children.length; i++) {
// 创建一个小 li
var li = this.document.createElement('li');
// 记录当前的索引号,通过自定义属性
li.setAttribute('index',i);
// 将小li 插入到 ol 里面
ol.appendChild(li);
// 利用排他思想,给第一个小li做点击后的高亮效果,直接给小圈圈绑定点击事件
li.addEventListener('click', function() {
// 干掉所有人,去除所有人的class类名字
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
// 留下我自己
this.className = 'active';
// 3. 点击小圆点,移动图片
var index = this.getAttribute('index');
// 当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
// 当我们点击了某个小li 就要把这个li 的索引号给 circle
circle = index;
// console.log(index);
// console.log(bannerWidth);
animate(ul, -index * bannerWidth)
}
})
}
// 把ol 里面的第一个小 li 设置为高亮
ol.children[0].className = 'active';
// 5. 克隆第一张图片到最后面
var first = ul.children[0].cloneNode(true);
// 放到ul里面的最后一张
ul.appendChild(first);
// 6. 点击右侧按钮图片滚动一张
var num = 0;
// 7.circle 控制小圆圈的播放
var circle = 0;
// 节流阀
var flag = true;
// 4.点击右侧按钮,自增加1
next.addEventListener('click', function() {
// alert('1') 测试是否生效
// 如果走到了最后一张图片,此时我们的ul 要快速复原left = 0 ;
if (flag) {
flag = false; // 关闭节流阀
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0
}
num++
animate(ul, -num * bannerWidth, function() {
flag = true
})
// 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle++;
// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == ol.children.length) {
circle = 0;
};
// 清除小圆圈样式
circleChange();
}
})
// 8.点击左侧按钮,自增加1
prev.addEventListener('click', function() {
// alert('1') 测试是否生效
if (flag) {
flag = false
// 如果num=0 点击左侧按钮 应该走到最后一张图片
if (num == 0) {
num = ul.children.length - 1
// 最后一张图片距离左侧的距离 banner的宽度 * 4
ul.style.left = -num * bannerWidth + 'px';
}
num--
animate(ul, -num * bannerWidth, function() {
flag = false;
})
// 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
circle--;
// 如果circle < 0 说明第一张图片,小圈圈要改为最后一个小圈圈 length-1
// if (circle < 0) {
// circle = ol.children.length - 1;
// };
circle = circle < 0 ? ol.children.length - 1 : circle;
circleChange();
}
});
// 去除小圆圈样式背景颜色
function circleChange() {
// 先清除其他小圆点的 active 类
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'active'
}
// 10. 自动播放轮播图
var timer = setInterval(() => {
// 手动调用点击事件
next.click();
}, 3000);
})
轮播图 + js实现
最新推荐文章于 2024-09-06 11:00:54 发布