<!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>
* {
padding: 0;
margin: 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 li {
width: 500px;
height: 200px;
/* overflow: hidden; */
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 5500px;
}
.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/摄影44.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影17.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影18.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影28.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影42.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影49.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影56.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影63.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影66.PNG" width="500" height="200" />
</li>
<li>
<img src="images/摄影81.PNG" width="500" height="200" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="common.js"></script>
<script>
// 获取需要得元素
var box = my$("box");
// 获取图片框框
var screen = box.children[0];
// 获取框框的宽度
var imgWidth = screen.offsetWidth;
// 获取ul
var ulObj = screen.children[0];
// 获取ul里面的所有li
var list = ulObj.children;
// 获取ol
var olObj = screen.children[1];
// 获取右箭头的div
var arr = my$("arr");
var pic = 0;
// 根据图片的张数,确定几个小圆点。
for (var i = 0; i < list.length; i++) {
// 创建有序列表,下面有序的那个
var liObj = document.createElement("li");
// 添加到OL中
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
// 在每一个li中添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
liObj.onmouseover = function () {
// 排他
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
this.className = "current";
pic = this.getAttribute("index");
animate(ulObj, -pic * imgWidth);
};
}
// 设置默认情况下第一个有背景色
olObj.children[0].className = "current";
// 克隆一个ul中第一个li加入到ul中的最后(克隆)
// 给用户无缝连接的感觉
ulObj.appendChild(ulObj.children[0].cloneNode(true));
// 自动播放
var timeId = setInterval(clickHandle, 100);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器,停止自动播放
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId = setInterval(clickHandle, 1000);
};
my$("right").onclick = clickHandle;
function clickHandle() {
// 如果到了最后一张图( 和第一张一样的图),跳转到第一张图
if (pic == list.length - 1) {
pic = 0;
//把ul移到最开始的位置
ulObj.style.left = 0 + "px";
}
// 立马显示第二张图
pic++;
animate(ulObj, -pic * imgWidth);
// 如果到了所有图片的最后一张(克隆的那张)
if (pic == list.length - 1) {
// 去掉最后一个小圆点的样式
olObj.children[olObj.children.length - 1].className = "";
// 给第一张图小圆点设置样式
olObj.children[0].className = "current";
} else {
// (排他)所有的按鈕的背景色去除
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
// 给对应的小按钮设置背景颜色
olObj.children[pic].className = "current";
}
};
my$("left").onclick = function () {
if (pic == 0) {
pic = list.length - 1;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth)
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
};
document.onkeyup = function (e) {
if(e.keyCode==37){
my$("left").onclick();
}else if(e.keyCode==39){
my$("right").onclick();
}
}
//封装动画函数,把谁移到哪里。
function animate(element, target) {
// 清理定时器,作用是让定时器不会再前一次的基础上,就会匀速
clearInterval(element.timeId);
// e给元素添加属性,每次执行函数的时候,只有一个定时器。就是元素的这个timeId属性
element.timeId = setInterval(function () {
//要移动一个元素,首先应该获取一个元素的当前位置。
var current = element.offsetLeft;
//每次移动多少像素
var step = 10;
// 当前位置是在目标的左边还是右边,左边表示正值递增,右边以为这负值递减
step = current < target ? step : -step;
// 每走一步给当前的位置加上步数
current += step;
// 判断是否移动,如果目标与当前位置的距离大于步数
if (Math.abs(target - current) > Math.abs(step)) {
// 当前位置就是current
element.style.left = current + "px";
} else {
// 否则(目标与当前位置的距离小于步数),直接到达目标
element.style.left = target + "px";
clearInterval(element.timeId)
}
}, 15);
};
</script>
</body>
</html>
用JS实现完整轮播图
最新推荐文章于 2020-06-12 20:57:19 发布