<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#banber {
border: #e74c3c 1px solid;
margin: 100px;
800px;
height: 480px;
position: relative;
overflow: hidden;
}
#banber span:last-child {
left: 780px;
}
#banber span {
background: #999999;
font-size: 26px;
color: #ffffff;
20px;
height: 40px;
opacity: 0.7;
position: absolute;
top: 220px;
}
#banber ul {
6000px;
position: absolute;
}
#banber ul li {
800px;
height: 480px;
float: left;
}
#list {
position: absolute;
background-color: #cccccc;
left: 580px;
top: 420px;
height: 10px;
opacity: 0.7;
padding: 2px 50px 2px 0px;
}
#list a {
float: left;
background-color: #f23d9c;
border-radius: 50%;
10px;
height: 10px;
margin-left: 8px;
}
</style>
<script src="animte.js"></script>
</head>
<body>
<div id="banber">
<ul>
<li><img src="images/CJD2.jpg" alt=""></li>
<li><img src="images/CJD1.jpg" alt=""></li>
<li><img src="images/CJD3.jpg" alt=""></li>
<li><img src="images/CJD4.jpg" alt=""></li>
<li><img src="images/CJD5.jpg" alt=""></li>
</ul>
<div id="arrol">
<span><</span>
<span>> </span>
</div>
<div id="list">
</div>
</div>
<script>
const banaer = document.getElementById('banber')
const arrol = document.getElementById('arrol')
const list = document.getElementById('list')
let index = 0
//1,动态生成小圆球
//获取ul
const b_ul = banaer.getElementsByTagName('ul')[0];
//获取LI的长度
const len = b_ul.getElementsByTagName('li').length
for (let i = 0; i < len; i++) {
let a = document.createElement('a')
list.appendChild(a)
a.onclick = Click
//设置标签自定义属性--很重要 添加索引
a.setAttribute('index', i)
}
list.children[0].style.backgroundColor = '#ff8400'
//点击
function Click() {
for (let i = 0; i < list.children.length; i++) {
let a = list.children[i]
a.style.backgroundColor = ''
this.style.backgroundColor = '#ff8400'
// 获取自定义属性 点的是第几个
index = parseInt(this.getAttribute('index'))
//调用动画
animte(b_ul, (-index) * 800)
}
}
//箭头
arrol.children[0].onclick = function () {
if (index == 0) {
index = len;
b_ul.style.left = -index * 800 + 'px';
}
index--;
list.children[index].click()
}
//无缝滚动
let firstLi = b_ul.children[0]
let clone = firstLi.cloneNode(true)
b_ul.appendChild(clone)
arrol.children[1].onclick = function () {
if (index === len) {
b_ul.style.left = '0px';
index = 0
}
index++;
if (index < len) {
list.children[index].click()
} else {
animte(b_ul, index * -800)
for (let i = 0; i < list.children.length; i++) {
let a = list.children[i]
a.style.backgroundColor = ''
}
list.children[0].style.backgroundColor = '#ff8400'
}
}
// 自动播放
let time=setInterval(function () {
arrol.children[1].click()
},3000)
banaer.onmouseenter=function () {
clearInterval(time)
}
banaer.onmouseleave=function () {
time=setInterval(function () {
arrol.children[1].click()
},3000)
}
</script>
</body>
</html>
今天写了无缝轮播滚动 虽然代码有许许多多的不规范，不过对思维的一个锻炼 前面知识的复习，对于初学者也是很不错