概述：有定时轮播、焦点切换、箭头按钮点击切换。
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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.showBox,
li {
width: 400px;
height: 250px;
}
li>img {
width: 100%;
}
.showBox {
position: relative;
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
}
ul {
width: 800%;
position: relative;
}
ul>li {
list-style: none;
float: left;
}
.cirList {
position: absolute;
right: 20px;
bottom: 10px;
width: 150px;
}
.cirList>li {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 5px;
}
.cirList .selected {
background-color: red;
}
.arrow{
display: none;
}
.arrow>a{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.arrow>.prev{
background: url(./images/prev.png) no-repeat center;
background-size: contain;
left: 0;
}
.arrow>.next{
background: url(./images/next.png) no-repeat center;
background-size: contain;
right: 0;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
<!-- 焦点 -->
<ul class="cirList">
</ul>
<div class="arrow">
<a href="" class="prev"></a>
<a href="" class="next"></a>
</div>
</div>
<script src="./move.js"></script>
<script src="./carousel.js"></script>
</body>
</html>
主体js代码:
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//获取焦点的盒子
var cirList = document.querySelector('.cirList')
//获取箭头的盒子
var arrow = document.querySelector('.arrow')
//变化的下标
var i = 0
//焦点取值的下标
var index = 0
//定时器
var timer
//调用init的方法
init()
//调用自动移动的方法
autoMove()
//给showBox添加移入事件
showBox.onmouseenter = function () {
//清除定时器
clearInterval(timer)
//显示箭头的盒子
arrow.style.display = 'block'
}
//移出继续执行
showBox.onmouseleave = function () {
//调用轮播
autoMove()
//隐藏
arrow.style.display = 'none'
}
//给箭头添加事件
Array.from(arrow.children).forEach((v, i) => {
v.onclick = (e) => {
e = e || window.event
//禁止a标签默认行为
e.preventDefault();
move(wrap, showWidth, i)
}
})
//给cirList下面的li添加点击事件 事件委托机制
cirList.onclick = function (e) {
e = e || window.event
//判断当前操作的元素是否为li
if (e.target.tagName == 'LI') {
//获取当前点击的li的下标
let clcikIndex = Array.from(cirList.children).findIndex((v) => {
//如果当前操作的对象是遍历的对象那么返回出去
return v == e.target
})-1
//改变对应位置及下标
index = clcikIndex
i = clcikIndex
//调用move移动
move(wrap, showWidth)
}
}
//初始化生成焦点的方法
function init() {
//拷贝之前生成对应的焦点
Array.from(wrap.children).forEach((v, i) => {
//在第一个焦点添加一个class名字为selected
if (i == 0) {
cirList.innerHTML += `<li class='selected'></li>`
} else {
//生成对应的焦点加入到cirList里面
cirList.innerHTML += `<li></li>`
}
})
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
//将克隆的元素加入到ul
wrap.appendChild(firstLi)
}
//封装一个autoMove的函数
function autoMove() {
//切换图片的定时器
timer = setInterval(() => {
move(wrap, showWidth)
}, 2000)
}
//封装一个焦点变化的函数 传入的index表示当前要设置的焦点
function changeCir(index) {
//排他思维
//先将所有的class清除
Array.from(cirList.children).forEach((li) => {
li.className = ''
})
//再给自己添加对应的样式
cirList.children[index].className = 'selected'
}
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element, showWidth, isAsc = true) {
//先检索区间
rangeCheck(element, isAsc)
//再进行i值变化
if (isAsc) {
i++
index++
} else {
i--
index--
}
//焦点切换及区间检索
rangeCheckCir(element)
//执行动画
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
bufferAnimation(element, {
left: distance
})
}
//区间检索i下标
function rangeCheck(element, isAsc) {
//到达最后下标
if (i >= element.children.length - 1 && isAsc) {
//i的值重新变成0
i = 0
}
if (i <= 0 && !isAsc) {
//立即设置位置 到第一张设置位置为最后一张
i = element.children.length - 1
}
//设置位置
element.style.left = i * showWidth * -1 + 'px'
}
//区间检索对应的焦点下标值
function rangeCheckCir(element) {
//判断焦点下标
if (index < 0) { //8张图 下标为 0-7 7个焦点 下标 0-6
index = element.children.length - 2
}
if (index > element.children.length - 2) {
index = 0
}
//更改焦点
changeCir(index)
}
辅助js代码:
//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element, targetObj,callbackFn) {
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//清除上一个定时器影响 (保证只有一个定时器)
clearInterval(element.timer)
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(() => {
var flag = true
//遍历对象
for (let key in targetObj) {
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
current += step
element.style[key] = current + 'px'
}
//如果是透明度的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) * 1000 / 10):Math.floor((target - current)*1000 / 10)
current += step / 1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
//调用回调函数 如果传入的参数是函数
if(typeof callbackFn == 'function'){
callbackFn()
}
}
},0)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}
