HTML结构
<!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>
<!-- 引入公共样式css文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入首页css文件 -->
<link rel="stylesheet" href="./css/demo2.css">
<!-- 引入字体图标css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 引入动画函数js文件 -->
<script src="./js/animate.js"></script>
</head>
<body>
<div class="focus_box">
<div class="loop_wrapper">
<img src="./images/3.jpg" alt="">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
<img src="./images/6.jpg" alt="">
<img src="./images/7.jpg" alt="">
<img src="./images/8.jpg" alt="">
<img src="./images/9.jpg" alt="">
</div>
<ol></ol>
<span class="right_arrow iconfont"></span>
<span class="left_arrow iconfont"></span>
</div>
<script src="./js/work2.js"></script>
</body>
</html>CSS样式
.focus_box {
position: relative;
margin: 20px auto;
width: 400px;
height: 600px;
overflow: hidden;
}
.focus_box .loop_wrapper {
position: absolute;
top: 0;
left: 0;
width: 1000%;
height: 100%;
}
.focus_box .loop_wrapper img {
float: left;
width: 10%;
height: 100%;
}
.focus_box ol {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.focus_box ol li {
float: left;
margin-left: 5px;
width: 15px;
height: 15px;
border-radius: 10px;
border: 1px solid #333;
background-color: #fff;
}
.focus_box ol .current {
background-color: red;
}
.focus_box .right_arrow {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
.focus_box .left_arrow {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.focus_box span {
font-size: 30px;
color: #333333;
display: none;
}
动画函数
function animate(obj, target, callback) { //obj指的是目标对象，target指的是目标位置
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()
}
//把每次加10改为一个慢慢减小的值，实现减速停止 步长公式：(目标值-现在的位置)/10
obj.style.left = obj.offsetLeft + step + 'px'
}, 20)
}js主题部分
//获取元素
const focus = document.getElementsByClassName('focus_box')[0]
const moveBox = document.getElementsByClassName('loop_wrapper')[0]
const ol = document.getElementsByTagName('ol')[0]
const rightArrow = document.getElementsByClassName('right_arrow')[0]
const leftArrow = document.getElementsByClassName('left_arrow')[0]
let focusWidth = focus.offsetWidth
let time
//添加鼠标经过事件
focus.addEventListener('mouseenter', function() {
clearInterval(time)
rightArrow.style['display'] = 'block'
leftArrow.style['display'] = 'block'
})
//添加鼠标离开事件
focus.addEventListener('mouseleave', function() {
clearInterval(time)
loop()
rightArrow.style['display'] = 'none'
leftArrow.style['display'] = 'none'
})
//动态创建小圆点 对图片进行遍历
for (let i = 0; i < moveBox.children.length; i++) {
let li = document.createElement('li')
ol.appendChild(li)
ol.children[0].className = 'current'
//对小圆点添加点击事件
li.addEventListener('click', function() {
//获取点击的小圆点的下标
let index = li.index = i
//调用动画函数
animate(moveBox, -this.index * focusWidth)
//排他思想
for (let j = 0; j < ol.children.length; j++) {
ol.children[j].className = ''
this.className = 'current'
}
})
}
let n = 0,
circle = 0
//复制第一张图片插入到最后
let first = moveBox.children[0].cloneNode(true)
moveBox.appendChild(first)
let len = moveBox.children.length - 1
let flag = true
//给右键添加点击事件
rightArrow.addEventListener('click', function() {
if (flag) {
flag = false
if (n === len) {
n = 0
moveBox.style.left = 0
}
n++
circle++
circle = circle === ol.children.length ? 0 : circle
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
ol.children[circle].className = 'current'
animate(moveBox, -n * focusWidth, function() {
flag = true
})
}
})
//给左键添加点击事件
leftArrow.addEventListener('click', function() {
if (flag) {
flag = false
if (n === 0) {
n = len
moveBox.style.left = -n * focusWidth + 'px'
}
n--
circle--
circle = circle < 0 ? ol.children.length - 1 : circle
for (let i = 0; i < ol.children.length; i++) {
ol.children[i].className = ''
}
ol.children[circle].className = 'current'
animate(moveBox, -n * focusWidth, function() {
flag = true
})
}
})
//自动播放
function loop() {
time = setInterval(function() {
rightArrow.click()
}, 2000)
}
loop()效果
loop
因篇幅问题不能全部显示，请点此查看更多更全内容