Need to pass in pictures
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
top: 0;
left: 0;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
user-select: none;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 2;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: "黑体";
font-size: 30px;
color: #000;
opacity: 0.3;
border: 1px solid #fff;
user-select: none;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
<!-- <script src="tool.js"></script> -->
</head>
<body>
<div class="all" id="box">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="images/wf1.jpg" width="500" height="200" /></li>
<li><img src="images/wf2.jpg" width="500" height="200" /></li>
<li><img src="images/wf3.jpg" width="500" height="200" /></li>
<li><img src="images/wf4.jpg" width="500" height="200" /></li>
<li><img src="images/wf5.jpg" width="500" height="200" /></li>
</ul>
<ol id="ol"></ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
<script>
function animate(obj, target, callBack) {
clearInterval(obj.timer)
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10
step = (step > 0 ? Math.ceil(step) : Math.floor(step))
if (obj.offsetLeft === target) {
clearInterval(obj.timer)
callBack && callBack()
return
}
obj.style.left = obj.offsetLeft + step + 'px'
}, 30)
}
var ul = document.querySelector('ul')
var ol = document.querySelector('ol')
var lis = ol.children
var screenWidth = document.querySelector('#screen').offsetWidth
var flag = true //节流阀，假设可以点击
//1.创建和图片同样数目的浮点导航
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li')
li.innerHTML = i + 1
ol.appendChild(li)
if (i === 0) li.className = 'current'
}
//2.给每个浮点导航都绑定一个点击事件
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('date-index', i)
lis[i].addEventListener('click', function () {
for (var j = 0; j < lis.length; j++) {
lis[j].className = ''
}
this.className = 'current'
var index = this.getAttribute('date-index')
//让浮点导航的下标和按钮的下标同步
count = num = index
animate(ul, -index * screenWidth)
})
}
//3.移动到盒子里面的时候，显示左右按钮,同时停止图片循环，离开就隐藏按钮，同时开启图片循环
var arr = document.querySelector('#arr')
var box = document.querySelector('#box')
box.addEventListener('mouseenter', function () {
arr.style.display = 'block'
clearInterval(tiemrPic)
tiemrPic = null
})
box.addEventListener('mouseleave', function () {
arr.style.display = 'none'
tiemrPic = setInterval(function () {
arr_r.click()
}, 1000)
})
//4.在ul后面添加第一个元素的的克隆元素
ul.appendChild(ul.children[0].cloneNode(true))
//5.点击右侧按钮，实现图片滚动
var arr_r = arr.querySelector('#right')
var count = 0
var num = 0
arr_r.addEventListener('click', function () {
if (flag) {
flag = false
if (count === ul.children.length - 1) {
ul.style.left = 0
count = 0
}
count++
animate(ul, -count * screenWidth, function () {
flag = true
})
if (num < lis.length - 1) {
num++
} else {
num = 0
}
lis_num()
}
})
function lis_num() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
lis[num].className = 'current'
}
//6.点击左侧按钮，实现图片滚动
var arr_l = document.querySelector('#left')
arr_l.addEventListener('click', function () {
if (flag) {
flag = false
if (count == 0) {
count = (ul.children.length - 1)
ul.style.left = (-count * screenWidth) + 'px'
}
count--
animate(ul, -count * screenWidth, function () {
flag = true
})
if (num === 0) {
num = ol.children.length - 1
} else {
num--
}
lis_num()
}
})
//让图片循环播放
var tiemrPic = setInterval(function () {
arr_r.click()
}, 1000)
</script>