原生js实现功能完整轮播图(自动轮播和点击轮播共同实现)
首先我们来看一下效果图:
1.打开界面自动播放
2.当鼠标移入时,自动播放停止,显示左右点击按钮;
接着我们来看详细代码
<!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">
<link rel="stylesheet" href="main.css">
<title>美女轮播图</title>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="meinv/11.jpg" alt=""></li>
<li><img src="meinv/22.jpg" alt=""></li>
<li><img src="meinv/33.jpg" alt=""></li>
<li><img src="meinv/44.jpg" alt=""></li>
<li><img src="meinv/55.jpg" alt=""></li>
<li><img src="meinv/66.jpg" alt=""></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="index.js"></script>
<script>
//只要改变ul位置就能实现轮播
var box = myid$("box"); //获取相框
var inner = box.children[0]; //第一个子元素
var ulObj = inner.children[0]; //获取ul
var imgWidth = inner.offsetWidth; //获取图片宽度
var list = ulObj.children; //获取li
var olObj = inner.children[1]; //获取ol
var pic = 0;
for (let i = 0; i < list.length; i++) {
var liObj = document.createElement("li"); //创建元素
olObj.appendChild(liObj); //插入元素
liObj.innerHTML = (i + 1); //设置内容
liObj.setAttribute("index", i); //设置自定义属性
//设置鼠标移入事件
liObj.onmouseover = function () {
for (let j = 0; j < olObj.children.length; j++) {
olObj.children[j].className = null;//遍历全部干掉样式
}
this.className = "current";//设置当前对象样式
pic = this.getAttribute("index");//获取pic
animate(ulObj, -pic * imgWidth);//设置动画
};
};
//设置ul中第一个li的样式
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后
//cloneNode()表示克隆参数true表示全部克隆 false表示克隆标签不带属性
//相当于把第一张图片在最后又加了一个li显示
ulObj.appendChild(ulObj.children[0].cloneNode(true));
function f1() {
if (pic == list.length - 1)//此时list长度为本身长度加1 所以倒数二张图片就是轮播的最后一张图
{
pic = 0;//归零
ulObj.style.left = 0 + "px"; //直接回到第一张
}
pic++;//否则加加 播放下一张图片
animate(ulObj, -pic * imgWidth);//调用动画
if (pic == list.length - 1)//同理设置样式
{
olObj.children[olObj.children.length - 1].className = null;//此时pic等于6,但是设置样式是0-5所以这里干掉是最后一个的样式
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = null;
}
olObj.children[pic].className = "current";
}
};
var arr = myid$("arr");
var timeId = setInterval(f1, 1000);
//设置鼠标移入显示同时干掉定时器的自动播放
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timeId);
};
//鼠标移出隐藏同时启动定时器
box.onmouseout = function () {
arr.style.display = "none";
timeId = setInterval(f1, 1000);
};
//右边点击向右移动
myid$("right").onclick = f1;
//向左移动
myid$("left").onclick = function () {
if (pic == 0) {
// console.log(list.length);
// console.log(olObj.children.length);
pic = olObj.children.length;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].className = null;
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
</script>
</body>
</html>
再来看看css代码:
* {
margin: 0 auto;
padding: 0px;
list-style: nono;
border: 0px;
}
#box {
position: relative;
width: 400px;
height: 640px;
padding: 5px;
border: 1px solid #666;
margin: 100px auto;
}
.screen {
position: relative;
width: 400px;
height: 640px;
overflow: hidden;
}
.screen ul li {
float: left;
width: 400px;
height: 640px;
overflow: hidden;
}
.screen ul {
position: absolute;
width: 3000px;
left: 0px;
top: 0px;
}
img {
width: 400px;
height: 640px;
}
.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;
list-style-type: none;
cursor: pointer;
border-radius: 5px;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 60px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -30px;
background: #000;
cursor: pointer;
line-height: 60px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
border-radius: 5px;
}
#arr #right {
right: 5px;
left: auto;
}
再来看看我封装的代码:
function myid$(myid) {
var id = myid;
return document.getElementById(id);
};
//设置任意的一个元素, 移动到指定的目标位置
//封装的动画函数
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
};
如有不清楚欢迎留言,想要源文件也可以给博主留言;
附资源地址:js轮播图
想免费获取的请留言。