JavaScript—原生輪播和無縫滾動
阿新 • • 發佈：2019-05-04
meta 滾動 idt asc over head for anim ive
<!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;
width: 800px;
height: 480px;
position: relative;
overflow: hidden;
}
#banber span:last-child {
left: 780px;
}
#banber span {
background: #999999;
font-size: 26px;
color: #ffffff;
width: 20px;
height: 40px;
opacity: 0.7;
position: absolute;
top: 220px;
}
#banber ul {
width: 6000px;
position: absolute;
}
#banber ul li {
width: 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%;
width: 10px;
height: 10px;
margin-left: 8px;
}
</style>
<script src="animte.js"></script>
</head>
<body>
<div id="banber">
<ul>
<li><img src="images/CJD2.jpg" ></li>
<li><img src="images/CJD1.jpg" ></li>
<li><img src="images/CJD3.jpg" ></li>
<li><img src="images/CJD4.jpg" ></li>
<li><img src="images/CJD5.jpg" ></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>
今天寫了無縫輪播滾動 雖然代碼有許許多多的不規範，不過對思維的一個鍛煉 前面知識的復習，對於初學者也是很不錯
JavaScript—原生輪播和無縫滾動