<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>图片循环播放</title>
<style>
#demo {
background-color: #fff;
overflow: hidden;
border: 1px solid #ccc;
width: 100%;
height: 100%;
}
#demo img {
height: 100%;
width: 25%;
border: 3xp solid #f2f2f2;
}
#indemo {
width: 200%;
display: flex;
}
#demo2,
#demo1 {
display: flex;
width: 50%;
}
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<img src="./img/1.jpeg" alt="" class="item" />
<img src="./img/2.jpeg" alt="" class="item" />
<img src="./img/3.jpeg" alt="" class="item" />
<img src="./img/4.jpeg" alt="" class="item" />
</div>
<div id="demo2"></div>
</div>
</div>
</body>
<script type="text/javascript">
var speed = 10
var tab = document.querySelector('#demo')
var tab1 = document.querySelector('#demo1')
var tab2 = document.querySelector('#demo2')
tab2.innerHTML = tab1.innerHTML
function marquee() {
if (tab2.offsetWidth - tab.scrollLeft <= 0) {
tab.scrollLeft -= tab1.offsetWidth
} else {
tab.scrollLeft++
}
}
let myMar = setInterval(marquee, speed)
tab.onmouseenter = function () {
console.log(111)
clearInterval(myMar)
}
tab.onmouseleave = function () {
myMar = setInterval(marquee, speed)
}
</script>
</html>
