html轮播图代码解析
<body>
<div class="box">
<a href="javascript:;" class="btn-l"></a>
<a href="javascript:;" class="btn-r"></a>
<ul>
<li>
<a href="#">
<img src="./images/4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="">
</a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
CSS 轮播图代码解析
* {
margin: 0;
padding: 0;
}
.current {
background-color: red;
}
ul,
ol {
list-style: none;
}
.box {
position: relative;
width: 500px;
height: 400px;
margin: 0 auto;
overflow: hidden;
}
.box ul {
position: absolute;
left: 0;
top: 0;
width: 3000px;
height: 400px;
}
.box ul li {
float: left;
}
.box ul img {
width: 500px;
height: 400px;
}
.btn-l {
display: none;
position: absolute;
top: 195px;
left: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #ccc;
width: 20px;
height: 20px;
z-index: 5;
}
.box .btn-r {
display: none;
background-color: #ccc;
width: 20px;
height: 20px;
position: absolute;
right: -5px;
top: 195px;
z-index: 5;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.box ol {
position: absolute;
left: 225px;
bottom: 10px;
/* width: 50px; */
height: 15px;
line-height: 15px;
display: flex;
border-radius: 7px;
/* background-color: yellow; */
}
.box ol li {
width: 10px;
height: 10px;
margin: 2px 2px;
border-radius: 10px;
/* background-color: #fff; */
border: 2px solid #fff;
}
</style>
javascript轮播图代码解析
window.addEventListener('load', function() {
var box = document.querySelector('.box');
var btn_l = document.querySelector('.btn-l')
var btn_r = document.querySelector('.btn-r')
var boxWidth = box.offsetWidth;
var ul = box.querySelector('ul')
var ol = document.querySelector('ol')
// 当鼠标经过轮播图模块， 左右按钮显示， 离开消失
box.addEventListener('mouseenter', function() {
btn_l.style.display = 'block';
btn_r.style.display = 'block';
clearInterval(timer)
timer = null;
})
box.addEventListener('mouseleave', function() {
btn_l.style.display = 'none';
btn_r.style.display = 'none';
timer = setInterval(function() {
btn_r.click();
}, 2000)
})
//动态生成小圆圈 ol里面的li,有几张图片就生成几个li
for (i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
li.setAttribute('index', i)
// 3.把ol里面的小圆圈第一个添加类current
ol.children[0].className = 'current';
//4.利用排他思想 把其他的小圆圈样式清除 只留当前个
li.addEventListener('click', function() {
for (i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
//当点击了某个小li 就要把这个li的索引号给num
num = index;
//当点击了某个小li 就要把这个li的索引号给circle
circle = num;
// animate(obj, target, function)
animate(ul, -index * boxWidth)
})
}
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// num是小按钮的索引号
var num = 0;
// circle 是控制小圆圈的的播放
var circle = 0;
// 图片滚动的无缝连接
btn_r.addEventListener('click', function() {
// 如果走到最后一张，此时ul快速复原到left0
if (num == ul.children.length - 1) {
num = 0;
ul.style.left = 0;
}
num++;
animate(ul, -num * boxWidth)
//点击右侧按钮，小圆圈跟着一起变化 可以声明一个变量，小圆圈跟着一起变
circle++;
if (circle == ol.children.length) {
circle = 0;
}
//调用函数
circleChange();
})
// 左侧按钮做法
btn_l.addEventListener('click', function() {
// 如果走到最后一张，此时ul快速复原到left0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -(ul.children.length - 1) * boxWidth + 'px';
}
num--;
animate(ul, -num * boxWidth)
// 点击右侧按钮，小圆圈跟着一起变化 可以声明一个变量，小圆圈跟着一起变
circle--;
circle = circle < 0 ? circle = 3 : circle;
circleChange();
})
// 因为左面和右面都有同样的代码 封装了一个函数来优化
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
// .自动播放模块，添加定时器
var timer = this.setInterval(function() {
btn_r.click();
}, 2000)
})
|