<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
border: 0;
list-style: none
}
.all {
width: 600px;
height: 400px;
padding: 6px;
margin: 200px auto;
position: relative;
border: 1px solid #ccc;
}
.screen {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
.screen li {
width: 600px;
height: 400px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3600px;
}
.all ol {
position: absolute;
text-align: center;
right: 10px;
bottom: 10px;
line-height: 30px;
}
.all ol li {
float: left;
width: 30px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 15px;
cursor: pointer;
}
.all ol li.current {
background-color: pink;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 50px;
height: 50px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -25px;
background: #000;
cursor: pointer;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #ccc;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class='all' id="box">
<div class="screen">
<ul>
<li><img src="images/wf1.jpg" width='600' height='400'></li>
<li><img src="images/wf2.jpg" width='600' height='400'></li>
<li><img src="images/wf3.jpg" width='600' height='400'></li>
<li><img src="images/wf4.jpg" width='600' height='400'></li>
<li><img src="images/wf5.jpg" width='600' height='400'></li>
</ul>
<ol></ol>
</div>
<div id="arr"><span id='left'><</span><span id='right'>></span></div>
</div>
<script>
//获取元素
var box = document.getElementById('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
//箭头 arrow
var arr = document.getElementById('arr');
var arrLeft = document.getElementById('left');
var arrRight = document.getElementById('right')
//图片的宽度
var imgWidth = screen.offsetWidth;
//1.动态生成序号
var count = ul.children.length;
for (var i = 0; i < count; i++) {
var li = document.createElement('li');
ol.appendChild(li);
setInnerText(li, i + 1);
//2.点击序号,动画的方式切换图片
li.onclick = liClick;
//让当前Li记录他的索引,设置标签的自定义属性
li.setAttribute('index', i)
}
function liClick() {
//2.1取消其他li的高亮显示,让当前li高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
}
//当前li高亮显示
this.className = 'current';
//2.2点击序号,动画的方式切换到当前点击图片的位置
var liIndex = parseInt(this.getAttribute('index'));
animate(ul, -liIndex * imgWidth)
//全局变量index和li中的index保持一致
}
//让序号1高亮显示
ol.children[0].className = 'current';
//3.鼠标放在盒子上显示箭头
box.onmouseenter = function() {
arr.style.display = 'block';
}
box.onmouseleave = function() {
arr.style.display = 'none';
}
//4.无缝连接
//下一张
var index = 0; //第一张图片的索引
arrRight.onclick = function() {
// 判断是否是克隆的第一张图片,如果是克隆的第一张图片,此时修改ul的坐标,显示真正的第一张图片
if (index === count) {
ul.style.left = '0px';
index = 0;
}
index++;
if (index < count) {
ol.children[index].click()
} else {
//如果是最后一张图片,以动画的方式,移动到克隆的抵账图片
animate(ul, -index * imgWidth);
// 取消所有序号的高亮显示,让第一序号高亮显示
for (var i = 0; i < ol.children.length; i++) {
var li = ol.children[i];
li.className = '';
}
ol.children[0].className = 'current';
}
}
//上一张
arrLeft.onclick = function() {
//如果当前是第一张图片,此时要偷偷的切换到最后一张图片的位置(克隆的第一张图片)
if (index === 0) {
index = count;
ul.style.left = -index * imgWidth + 'px';
}
index--;
ol.children[index].click()
}
var firstLi = ul.children[0];
// 克隆li cloneNode() 复制节点
// 参数 true 复制节点中的内容
// false 只复制当前节点,不复制里面的内容
var cloneLi = firstLi.cloneNode(true);
ul.appendChild(cloneLi)
//封装动画函数
function animate(element, target) {
//通过判断,保证页面上只有一个定时器在执行动画
if (element.timeId) {
clearInterval(element.timeId);
element.timeId = null;
}
element.timeId = setInterval(function() {
//步进,每次移动的距离
var step = 10;
//盒子当前的位置
var current = element.offsetLeft;
//判断如果当前位置>目标位置 此时的step要小于0
if (current > target) {
step = -Math.abs(step);
}
if (Math.abs(current - target) <= Math.abs(step)) {
//让定时器停止
clearInterval(element.timeId);
//让盒子到target的位置
element.style.left = target + 'px';
return;
}
//移动盒子
current += step;
element.style.left = current + 'px'
}, 10)
}
// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
</script>
</body>
</html>
JS实现轮播图
最新推荐文章于 2022-07-06 16:28:54 发布