直接步入正题,解读在代码注释里面!
页面布局部分:
<div class="focus">
//左侧按钮
<a href="javascript:;" class="arrow-l iconfont icon-jiantou1"></a>
//右侧按钮
<a href="javascript:;" class="arrow-r iconfont icon-jiantou"></a>
<ul>
//轮播图中的图片
<li>
<a href=""><img src="./upload/focus.png" alt=""></a>
</li>
<li>
<a href=""><img src="./upload/focus.png" alt=""></a>
</li>
<li>
<a href=""><img src="./upload/focus.png" alt=""></a>
</li>
<li>
<a href=""><img src="./upload/focus.png" alt=""></a>
</li>
</ul>
//轮播图中的小圆圈
<ol class="circle">
</ol>
</div>
CSS布局部分:(选部分注释,如果有不明白的可以评论或者私信问我哦)
/* 轮播图 */
//轮播图父盒子样式
.focus {
position: relative;
float: left;
width: 721px;
height: 455px;
//隐藏超出部分
overflow: hidden;
}
//轮播图盒子样式
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
//设置元素堆叠顺序
z-index: -1;
}
//图片样式
.focus ul li {
float: left;
}
//按钮样式
.arrow-l,
.arrow-r {
position: absolute;
/* 居中 */
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
//先隐藏样式,鼠标经过再显示
display: none;
}
.arrow-r {
right: 0;
}
//小圆圈父盒子样式
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
//小圆圈样式
.circle li {
width: 10px;
height: 10px;
float: left;
//边框样式
border: 2px solid rgba(255, 255, 255, .5);
margin: 0 5px;
border-radius: 50%;
cursor: pointer;
}
Js部分:(选部分注释,如果有不明白的可以评论或者私信问我哦)
window.addEventListener('load', function () {
//获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//鼠标经过,左右箭头隐藏
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;
})
//鼠标离开启动定时器
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
//启动定时器
timer = setInterval(function() {
//手动调用点击事件
arrow_r.click();
}, 2000);
})
//动态生成小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle')
//console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//记录当前小圆圈的索引号,通过自定义属性来做
li.setAttribute('index', i);
//排他思想 给li添加点击效果
//小圆点点击事件
li.addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ' ';
}
this.className = 'current';
//点击圆圈移动图片
//动画函数使用者必须有定位 算法:小圆圈的索引号*图片大小就是ul的移动距离 注意是负值
//当点击了某个li 就拿到了当前li的索引号
var index = this.getAttribute('index');
//当点击了li, 就要把li的索引号给num 控制图片
num = index;
//当点击了li, 就要把li的索引号给circle 控制圆圈
circle = index;
//console.log(focus.offsetWidth);
animate(ul, -index * focusWidth);
})
}
//让第一个圈添加白底
ol.children[0].className = 'current';
//克隆第一张图片,放到最后面 (写到生成小圆圈的外面)
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//点击右侧按钮滚动图片
var num = 0;
//控制小圆圈播放
var circle = 0;
//节流阀
var flag = true;
arrow_r.addEventListener('click', function() {
//如果走到最后一张图片 ,ul快速复原 left改为0 (无缝滚动)
if(flag) {
flag = false; //关闭节流阀
if(num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function(){
flag = true; //打开节流阀
});
circle++;
//如果circle长度 = ol.children.length 回到0
if(circle == ol.children.length) {
circle = 0;
}
circleChange();
}
});
//左侧按钮
arrow_l.addEventListener('click', function() {
//如果走到第一张图片 ,ul快速到最后一张 left改为-(ul.children.length - 1) * focusWidth + 'px' (无缝滚动)
if(flag) {
flag = false; //关闭节流阀
if(num == 0) {
num = ul.children.length - 1;
ul.style.left = -num* focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function(){
flag = true; //打开节流阀
});
circle--;
//如果circle<0 说明到第一张图片了
// if(circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? ol.children.length - 1 : circle;
circleChange();
}
});
function circleChange () {
for(var i = 0;i<ol.children.length;i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
//定时器
var timer = setInterval(function() {
//手动调用点击事件
arrow_r.click();
}, 2000);
})
生命不息,学习不止,键盘敲烂,月薪过万!加油,代码人!