<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper">
<!-- 初始是第五张图 所以要-600 -->
<div style="left: -600px;" class="wrap">
<img src="./img/05.jpg" alt="">
<img src="./img/05.jpg" alt="">
<img src="./img/02.jpg" alt="">
<img src="./img/03.jpg" alt="">
<img src="./img/04.jpg" alt="">
<img src="./img/05.jpg" alt="">
<img src="./img/01.jpg" alt="">
</div>
<div class="dot-wrapper">
<span class="dot on"></span>
<span class="dot on"></span>
<span class="dot on"></span>
<span class="dot on"></span>
<span class="dot on"></span>
</div>
<span class="jt left"><</span>
<span class="jt right">></span>
</div>
<script>
var wrap = document.querySelector('.wrap')
var num = -600
var leftBtn = document.querySelector('.left')
var rightBtn = document.querySelector('.right')
var timer = null
//代表当前轮播的图片的索引
var index = 0;
//选中所有圆点
var dots = document.querySelectorAll('.dot')
//给圆点添加/移除class
function setCurrentDot(){
for (var k in dots) {
if(index === k){
dots[k].classList.add('on')
}else{
dots[k].classList.remove('on')
}
}
}
//给圆点添加点击事件
for (var i = 0;i < dots.length; i++) {
(function (j) {
dots[j].addEventListener('click',function (){
//移动到对应的图片
startmove(wrap, -600*j)
//改变index
index = j
setCurrentDot()
num = -600 * j
})
}(i))
}
var wrapper = document.querySelector('.wrapper')
//当鼠标划入轮播区域的时候 让自动轮播停止
wrapper.addEventListener('mouseenter',function(){
clearInterval(timer)
})
//当鼠标移开 轮播区域的时候 继续自动轮播
wrapper.addEventListener('mouseleave',function(){
autoPlay()
})
autoPlay()
//addEventListener('event',fn)
//第一个参数就是添加的事件名称 第二个参数 触发事件的处理函数
leftBtn.addEventListener('click',function (){
prev()
})
rightBtn.addEventListener('click',function (){
next()
})
// var left = document.querySelector('.left')
// //给left这个标签添加一个点击事件 当left标签被点击的时候 会执行 传入的函数
// left.addEventListener('click',function(){
// console.log('123')
// })
// setInterval(() => {
// if (num === -3000)
// num = 0;
// num -= 600
// wrap.style.left = num + 'px'
// },500);
//切换下一张图片
function next() {
if(num === -3000) {
num = 0
wrap.style.left = num
}
num -= 600
startmove(wrap, num)
// wrap .style.left = num + 'px'
if (index > 4) {
index = 0
}
index++
setCurrentDot()
}
//切换上一张图片
function prev() {
if (num === 0) {
num = -3000
wrap.style.left = num
}
num += 600
// wrap.style.left = num + 'px'
startmove(wrap, num)
if (index < 0) {
}
}
//自动轮播
function autoPlay() {
timer = setInterval(() => {
next()
}, 500);
}
//缓动函数 (图片到达的目标位置 — 图片当前所在的位置) / 8
// @param { dom } 操作的dom对象
// @param { target } 移动的目标位置
function startmove(dom, target) {
clearInterval(dom.timer)
dom.timer = setInterval(() => {
//拿到容器当前所在的位置
var current = getStyle(dom, 'left')
//计算缓动的速率
var iSpeed = (target - current) / 8
//对速率取整
iSpeed = iSpeed > 0 ? Math.cell(iSpeed) : Math.floor(iSpeed)
//缓动
dom.style.left = current + iSpeed + 'px'
if (current === target) {
//清除定时器 clearInterval
clearInterval(dom.timer)
}
},30)
}
// 获取dom对象css样式的值
// @param { dom } 操作的dom对象
// @param { style: String } 想要获取的css属性名
function getStyle(dom, style) {
// getComputedStyle(dom) 返回一个具有dom节点所有css样式的对象
// getComputedStyle 这个方法 在ie8 及其以下的浏览器 不兼容
return parseInt(getComputedStyle(dom)[style])
}
</script>
</body>
</html>
这是css的样式
.wrapper{
position: relative;
top: 200px;
width: 600px;
height: 400px;
/* 溢出部分隐藏 */
overflow: hidden;
margin: 0 auto;
/* margin-top: -200px; */
}
.wrapper .wrap{
position: absolute;
left: 0;
bottom: 0;
width: 4200px;
height: 400px;
z-index: 1;
}
.wrap img{
float: left;
width: 600px;
height: 400px;
}
.dot-wrapper {
position: absolute;
left: 225px;
bottom: 0px;
width: 150px;
height: 40px;
line-height: 40px;
z-index: 5;
}
.dot-wrapper .dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color:#ccc;
margin-left: 5px;
}
.dot-wrapper .dot.on{
background-color: #ff4400;
}
.jt{
position: absolute;
top: 40%;
color:#fff;
padding: 0px 14px;
font-size: 55px;
text-align: center;
z-index: 2;
/* 箭头隐藏 */
display: none;
}
.jt.left{
left: 10px;
}
.jt.right{
right: 10px;
}
/* 当鼠标滑到最外层容器的时候 让箭头显示 */
.wrapper:hover .jt{
display: block;
/* 透明度 取值范围0-1 0是透明 */
opacity: 0.4;
}
.wrapper .jt:hover{
opacity: 1;
}
欢迎留言交流!😊