<!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>
*{ margin:0px; padding: 0px; list-style: none; }
.main-loop { position: relative; overflow: hidden; width: 100%; }
.main-loop .loop-inner { position: relative; width: 1370px; height: 620px; margin: 0 auto; }
.main-loop .loop-inner .prev { position: absolute; top: 0; left: -50%; z-index: 10; width: 100%; height: 100%; margin: 0 0 0 -685px; background: rgba(255, 255, 255, 1); }
.main-loop .loop-inner .prev a { display: block; position: absolute; top: 50%; right: -32px; width: 32px; height: 64px; margin: -32px 0 0 0; background: #000; opacity: 0.6; }
.main-loop .loop-inner .prev a:hover { opacity: 1; }
.main-loop .loop-inner .next { position: absolute; top: 0; left: 50%; z-index: 10; width: 100%; height: 100%; margin: 0 0 0 685px; background: rgba(255, 255, 255,1); }
.main-loop .loop-inner .next a { display: block; position: absolute; top: 50%; left: -32px; width: 32px; height: 64px; margin: -32px 0 0 0; background: #000; opacity: 0.6; }
.main-loop .loop-inner .next a:hover { opacity: 1; }
.main-loop ul { position: absolute; top: 0; left: -1370px; width: 4110px; font-size: 0; }
.main-loop ul li { display: inline-block; }
.main-loop ul li a { display: block; }
.main-loop ul li a img { display: block; width: 1370px; }
</style>
<script>
window.onload = function() {
let setLoop = function () {
class CousLoop {
constructor(ul, li, left, right, time) {
this.ul = document.getElementById(ul)
this.li = this.ul.getElementsByTagName(li)
this.left = document.querySelector(`.${left}`)
this.right = document.querySelector(`.${right}`)
this.liW = this.li[0].offsetWidth
this.ulW = this.li.length * this.liW
this.num = this.liW
this.time = time || 1
this.timeOut = null,
this.tran = true
}
setTime() {
clearInterval(this.timeOut)
let timeNum = parseInt(this.time * 1000 * 5)
this.timeOut = setInterval(() => {
this.right.onclick()
}, timeNum)
}
event(arr = [this.ul, this.right, this.left]) {
arr.forEach(ele => {
ele.onmouseover = () => {
clearInterval(this.timeOut)
}
ele.onmouseout = () => {
this.setTime()
}
})
}
transitionend (fn) {
this.ul.addEventListener('transitionend', () => {
if (typeof fn === 'function') {
fn.call(this, 0)
return
}
this.tran = true
})
}
rightFn() {
this.right.onclick = () => {
if (this.tran) {
this.tran = !this.tran
this.num += this.liW
this.moveSet(1)
if (this.num >= this.ulW - this.liW) {
this.num = 0
this.transitionend(this.moveSet)
}
this.transitionend()
}
}
}
leftFn() {
this.left.onclick = () => {
if (this.tran) {
this.tran = !this.tran
this.num -= this.liW
this.moveSet(1)
if (this.num <= 0) {
this.num = this.ulW - this.liW
this.transitionend(this.moveSet)
}
this.transitionend()
}
}
}
moveSet(val) {
this.ul.style['transition'] = 'none'
if (val) this.ul.style['transition'] = `${this.time}s ease-in-out`
this.ul.style.left = `-${this.num}px`
}
run() {
this.ul.style = `width:${this.ulW}px;transition: ${this.time}s ease-in-out; left: -${this.liW}px`
this.rightFn()
this.leftFn()
this.right.onclick()
this.setTime()
this.event()
}
}
return function (obj) {
let opset = ['ul', 'li', 'left', 'right', 'time']
let arg = []
// 防止形參亂序
opset.forEach(name => {
if (obj[name]) {
arg.push(obj[name])
}
})
let p1 = new CousLoop(...arg)
p1.run()
}
}()
setLoop({
ul: 'loop-width',
li: 'li',
left: 'prev',
right: 'next'
})
}
</script>
</head>
<body>
<div class="main-loop">
<div class="loop-inner">
<div class="prev">
<a href="javascript:;"></a>
</div>
<ul id="loop-width" class="clearfix">
<li>
<a href="#">
<img src="./images/1.jpg" alt="1" />
</a>
</li>
<li>
<a href="#">
<img src="./images/2.jpg" alt="2" />
</a>
</li>
<li>
<a href="#">
<img src="./images/3.jpg" alt="3" />
</a>
</li>
<li>
<a href="#">
<img src="./images/4.jpg" alt="3" />
</a>
</li>
<li>
<a href="#">
<img src="./images/1.jpg" alt="1" />
</a>
</li>
</ul>
<div class="next">
<a href="javascript:;"></a>
</div>
</div>
</div>
</body>
</html>
