自定义轮播图以及bug优化
一、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen ul{
list-style: none;
position: absolute;
top: 0;
left: 0;
width: 3000px;
}
.screen ul li{
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<!-- 自定义轮播图 -->
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="./images/1.jpg" alt="" width="500" height="200" /></li>
<li><img src="./images/2.jpg" alt="" width="500" height="200" /></li>
<li><img src="./images/3.jpg" alt="" width="500" height="200" /></li>
<li><img src="./images/4.jpg" alt="" width="500" height="200" /></li>
<li><img src="./images/5.jpg" alt="" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="./js/common.js"></script>
<script>
// 获取相框
var boxObj = my$("box");
var screenObj = boxObj.children[0];
var imgWidth = screenObj.offsetWidth;
var ulObj = screenObj.children[0];
var list = ulObj.children;
var olObj = screenObj.children[1];
//焦点的div
var arr = my$("arr");
// 记录当前播放相片的小按钮的下标
var pic = 0;
for (let i = 0; i < list.length; i++) {
var liObj = document.createElement("li");
liObj.setAttribute("index",i);
setInnerText(liObj,i+1);
olObj.appendChild(liObj);
liObj.onmouseover = function(){
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
this.className = "current";
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
// animate(ulObj,-pic*imgWidth);
};
liObj.onmouseout = function(){
this.removeAttribute("class");
};
}
// 为第一个下方块添加默认选中状态
olObj.children[0].className = "current";
// ---------- 设置自动播放 -------------- //
// 克隆第一张图片添加到ulObj对象里面
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId = setInterval(clickHandle,1000);
// 鼠标进入box的div显示左右焦点的div
boxObj.onmouseover = function(){
arr.style.display = "block";
clearInterval(timeId);
};
// 鼠标离开到box的div隐藏左右焦点的div
boxObj.onmouseout = function(){
arr.style.display = "none";
timeId = setInterval(clickHandle,1000);
};
// 右边按钮
my$("right").onclick = clickHandle;
// 左边按钮
my$("left").onclick = function(){
if(pic == 0){
pic = 5;
ulObj.style.left = -pic*imgWidth + "px";
}
pic--;
animate(ulObj,-pic*imgWidth);
// 去掉所有小按钮颜色
for (let i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
// 为当前小按钮添加上颜色
olObj.children[pic].className = "current";
};
// 切换下一个照片
function clickHandle(){
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if(pic == list.length-1){
pic = 0;
ulObj.style.left = 0 + "px";
}
pic++;
animate(ulObj,-pic * imgWidth);
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if(pic == list.length-1){
// 第五个按钮颜色干掉
olObj.children[olObj.children.length-1].className = "";
olObj.children[0].className = "current";
}else{
//干掉所有的小按钮的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
</script>
</body>
</html>
二、common.js
/*根据id获取元素对象*/
function my$(id){
return document.getElementById(id);
}
/**
* 设置任意元素的中间文本内容
* @param {*} element 标签元素
* @param {*} text 文本内容
*/
function setInnerText(element,text){
if(typeof element.textContent === "undefined"){
element.innerText = text;
}else{
element.textContent = text;
}
}
/**
* 动画函数
* 任意一个元素移动到指定的目标位置
* @param {*} element 任意一个元素
* @param {*} target 目标位置（number类型）
*/
function animate(element, target) {
// 先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
// 获取移动元素当前位置
var current = element.offsetLeft;
// 每次移动距离
var step = 9;
step = target > current ? step : -step;
// 移动后的距离
current +=step;
// 判断是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)){
element.style.left = current + "px";
}else{
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
三、图片
第一张图片：
第二张图片：
第三张图片：
第四张图片：
第五张图片：
四、效果图
