轮播图的
1.HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图的制作</title>
</head>
<body>
<div class="box">
<div class="big_father">
<!-- 左右点击的图片 -->
<a href="JavaScript:; " class="a_left focus"><</a>
<a href="JavaScript:; " class="a_right focus">></a>
<!-- 轮换图片 -->
<ul class="image">
<li>
<a href="#"><img src="./轮播图/focus.jpg" alt="focus"></a>
</li>
<li>
<a href="#"><img src="./轮播图/focus1.jpg" alt="focus1"></a>
</li>
<li>
<a href="#"><img src="./轮播图/focus2.jpg" alt="focus2"></a>
</li>
<li>
<a href="#"><img src="./轮播图/focus3.jpg" alt="focus3"></a>
</li>
</ul>
<!-- 下方的小li -->
<ol class="circular">
</ol>
</div>
</div>
</body>
<!-- trans动画函数的导入 -->
<script src="animater.js"></script>
<!-- 设计轮播图 -->
<script src="./index.js"></script>
</html>
2.style样式区的代码
<style>
/* 点击小 li 变颜色 */
.changeColor {
background-color: rgb(177, 168, 168);
}
* {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: cornsilk;
}
.focus {
opacity: 0;
}
a:hover {
color: burlywood;
}
.big_father:hover .focus {
opacity: 1;
}
.big_father {
width: 721px;
height: 500px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.big_father .a_left {
width: 20px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 25px;
top: 225px;
z-index: 999;
}
.big_father .a_right {
width: 20px;
height: 30px;
line-height: 30px;
text-align: center;
display: inline-block;
background-color: #ccc;
position: absolute;
right: 25px;
top: 225px;
z-index: 999;
}
.big_father ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.big_father ul li {
float: left;
}
/* 下方的小圆圈 */
.circular {
position: absolute;
top: 420px;
left: 20px;
}
.circular li {
width: 15px;
height: 15px;
margin: 0 5px;
border-radius: 50%;
border: 1px solid white;
float: left;
cursor: pointer;
}
</style>
3.JS代码(封装动画函数)
//这里是用js封装的一个动画函数;
function animater(obj, length) {
//清除定时器--防止重复开启定时器
clearInterval(obj.name)
obj.name = setInterval(() => {
//先计算一下step是正值还是负值
var step = (length - obj.offsetLeft) / 10
//三元表达式判断移动的步长是正值还是负值
var step = step > 0 ? Math.ceil((length - obj.offsetLeft) / 10) : Math.floor((length - obj.offsetLeft) / 10);
obj.style.left = obj.offsetLeft + step + 'px';
//判断是否移动到设置的位置
if (obj.offsetLeft == length) {
clearInterval(obj.name);
}
}, 30)
}
4.JS代码(轮播图功能区)
//获取需要的元素节点
var ul = document.querySelector('.image');
var img = ul.querySelectorAll('img')[0];
var ol = document.querySelector('.circular');
/* 设置一个num和circular的全局变量 */
var num = 0,
circular = 0;
/* 动态深生成小圆圈,以及点击切换图片 --start*/
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
if (i == 0) {
li.className = 'changeColor';
}
/* 设置点击切换图片 */
li.addEventListener('click', function() {
//获取到每个li的index数量
var index = this.getAttribute('index');
animater(ul, (-index) * img.offsetWidth)
for (var j = 0; j < ul.children.length - 1; j++) {
ol.children[j].className = '';
};
circular = index;
ol.children[index].className = 'changeColor'
})
}
/* 动态深生成小圆圈,以及点击切换图片 --end*/
/* 点击右键图片发生切换 --start */
//克隆第一个节点实现平滑跳转
var first = ul.children[0].cloneNode(true);
ul.appendChild(first)
var a_right = document.querySelector('.a_right');
a_right.addEventListener('click', function() {
num++;
circular++;
if (num > ul.children.length - 1) {
ul.style.left = 0
num = 1;
};
animater(ul, (-num) * img.offsetWidth);
//重置小圆圈的值
if (circular == ol.children.length) {
circular = 0;
}
//消除所有的小圆圈颜色,重新设置新的颜色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
};
ol.children[circular].className = 'changeColor';
});
/* 点击右键图片发生切换 --end */
/* 点击左键图片发生切换 --start */
var a_left = document.querySelector('.a_left');
a_left.addEventListener('click', function() {
num--;
circular--;
if (num < 0) {
ul.style.left = -ol.children.length * img.offsetWidth + 'px'
num = 3;
};
animater(ul, (-num) * img.offsetWidth);
//重置小圆圈的值
if (circular < 0) {
circular = ol.children.length - 1;
}
//消除所有的小圆圈颜色,重新设置新的颜色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
};
ol.children[circular].className = 'changeColor';
});
/* 点击左键图片发生切换 --end */
/* 定时器的设置 --start*/
setInterval(function() {
//此处用到了事件的点击
a_right.click();
}, 2000);
1.图片展示区:
2.优化方案:
1.给当前的轮播图加上功能:鼠标悬停轮播图清除定时器,鼠标离开轮播图,开启定时器
2.本次的轮播图的设计用到了,深度克隆组件cloneNode(true),为了解决轮播图的平滑切换(主要是第一张图与最后一张图)
** 3.欢迎各位小伙伴提出宝贵的意见!!! **