js实现轮播图
1 <style> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 /* 1.轮播图容器 */ 7 .slide { 8 width: 600px; 9 height: 400px; 10 margin: 100px auto; 11 position: relative; 12 } 13 14 /* 1.1图片 */ 15 .slide img { 16 width: 100%; 17 height: 100%; 18 } 19 /* 1.2上一张按钮 */ 20 .slide .prev, 21 .slide .next { 22 position: absolute; 23 width: 50px; 24 height: 50px; 25 line-height: 50px; 26 background-color: #666; 27 top: 50%; 28 text-align: center; 29 border-radius: 50%; 30 color: #fff; 31 font-size: 26px; 32 transform: translateY(-50%); 33 } 34 .slide .prev { 35 left: 10px; 36 } 37 38 /* 1.3下一张按钮 */ 39 .slide .next { 40 right: 10px; 41 } 42 43 /* span小圆点 */ 44 .circles { 45 position: absolute; 46 bottom: 10px; 47 width: 160px; 48 height: 16px; 49 left: 50%; 50 z-index: 10; 51 transform: translateX(-50%); 52 } 53 54 .circles span { 55 display: inline-block; 56 width: 16px; 57 height: 16px; 58 margin: 0 10px; 59 background-color: #fff; 60 border-radius: 50%; 61 } 62 63 .circles .active { 64 background-color: aqua; 65 } 66 </style> 67 </head> 68 69 <body> 70 <!-- 轮播图容器 --> 71 <div class="slide"> 72 <!--1.1 图片 --> 73 <img src="./img/02.webp" alt=""> 74 <!-- 1.2上一张按钮 --> 75 <div class="prev"> 76 < </div> 77 <!-- 1.3下一张按钮 --> 78 <div class="next">></div> 79 <!--1.4小圆点 --> 80 <div class="circles"> 81 <!-- 用map方法动态渲染小圆圈 --> 82 <!-- <span class="active"></span> 83 <span></span> 84 <span></span> 85 <span></span> --> 86 </div> 87 88 </div> 89 90 <script> 91 // 定义数组，保存所有图片路径 92 var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp'] 93 // 获取图片的dom元素 94 var img = document.querySelector('img'); 95 96 var slide = document.querySelector('.slide'); 97 98 // 默认从0开始 99 var index = 0; 100 // 定义变量保存定时器标识 101 var timeId; 102 103 // 获取小圆点大容器 104 var circles = document.querySelector('.circles') 105 // 获取上一张按钮 106 var prev = document.querySelector('.prev') 107 108 // 获取下一张按钮 109 var next = document.querySelector('.next') 110 111 112 // 开启定时器 更换图片集 113 // 开启自动轮播 调用下面封装的方法 114 autoPlay() 115 // 渲染小圆点 116 render() 117 // 给slide添加鼠标移入和移出时间 118 slide.addEventListener('mouseover', function () { 119 // 鼠标移入清除定时器 120 clearInterval(timeId) 121 }) 122 slide.addEventListener('mouseout', function () { 123 // 鼠标离开自动开启定时器：就是把上面的代码复制一份 124 // 开启自动轮播 调用下面封装的方法 125 autoPlay() 126 127 128 }) 129 // 给上一张和下一张添加点击事件 130 prev.addEventListener('click', function () { 131 // 更改下标 132 index = --index === -1 ? arr.length - 1 : index; 133 // 显示图片 134 img.src = arr[index]; 135 // 重新渲染小圆点 136 render() 137 }) 138 next.addEventListener('click', function () { 139 // 更改下标 140 index = ++index === arr.length - 1 ? 0 : index; 141 // 显示图片 142 img.src = arr[index]; 143 // 重新渲染小圆点 144 render() 145 }) 146 147 // 封装函数 鼠标移入前的轮播，和鼠标离开后的轮播代码重复 148 // 轮播图渲染方法 149 function autoPlay() { 150 timeId = setInterval(function () { 151 // 定义变量，保存默认显示的图片下标 152 // 更改下标 注意不能一直加 因为数组长度是4，超过4让它从0开始再次轮回（用三目运算） 153 index = ++index === arr.length ? 0 : index; 154 // 每隔一秒更换下一张图片路径 155 img.src = arr[index]; 156 157 // 定时器开启时渲染小圆点重新激活 158 render() 159 }, 1000) 160 } 161 // 封装小圆点的渲染 162 function render() { 163 circles.innerHTML = arr.map(function (item, i) { 164 // i是当前小圆点 index是当前下标 165 return ` <span class=${index === i ? 'active' : ''}></span>`; 166 // 数组转字符串用join 167 }).join(''); 168 } 169 </script>
案例总结：
1、图片要放入数组，添加定时器每秒钟让图片换下一张可以调用下标来完成，数字超过图片数量从第一张开始播放。
2、添加鼠标移入移出事件，鼠标移入清除定时器，鼠标离开自动开启定时器同时开启自动轮播。
3、给上一张下一张按钮添加点击事件，每次点击下标改变图片轮播图更换
注意：重复代码请封装函数，避免代码冗余，以便于复用代码。
结语：荣姐，加油！！！
<style>
* {
padding: 0;
margin: 0;
}
/* 1.轮播图容器 */
.slide {
width: 600px;
height: 400px;
margin: 100px auto;
position: relative;
}
/* 1.1图片 */
.slide img {
width: 100%;
height: 100%;
}
/* 1.2上一张按钮 */
.slide .prev,
.slide .next {
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #666;
top: 50%;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 26px;
transform: translateY(-50%);
}
.slide .prev {
left: 10px;
}
/* 1.3下一张按钮 */
.slide .next {
right: 10px;
}
/* span小圆点 */
.circles {
position: absolute;
bottom: 10px;
width: 160px;
height: 16px;
left: 50%;
z-index: 10;
transform: translateX(-50%);
}
.circles span {
display: inline-block;
width: 16px;
height: 16px;
margin: 0 10px;
background-color: #fff;
border-radius: 50%;
}
.circles .active {
background-color: aqua;
}
</style>
</head>
<body>
<!-- 轮播图容器 -->
<div class="slide">
<!--1.1 图片 -->
<img src="./img/02.webp" alt="">
<!-- 1.2上一张按钮 -->
<div class="prev">
< </div>
<!-- 1.3下一张按钮 -->
<div class="next">></div>
<!--1.4小圆点 -->
<div class="circles">
<!-- 用map方法动态渲染小圆圈 -->
<!-- <span class="active"></span>
<span></span>
<span></span>
<span></span> -->
</div>
</div>
<script>
// 定义数组，保存所有图片路径
var arr = ['./img/01.webp', './img/02.webp', './img/03.webp', './img/04.webp']
// 获取图片的dom元素
var img = document.querySelector('img');
var slide = document.querySelector('.slide');
// 默认从0开始
var index = 0;
// 定义变量保存定时器标识
var timeId;
// 获取小圆点大容器
var circles = document.querySelector('.circles')
// 获取上一张按钮
var prev = document.querySelector('.prev')
// 获取下一张按钮
var next = document.querySelector('.next')
// 开启定时器 更换图片集
// 开启自动轮播 调用下面封装的方法
autoPlay()
// 渲染小圆点
render()
// 给slide添加鼠标移入和移出时间
slide.addEventListener('mouseover', function () {
// 鼠标移入清除定时器
clearInterval(timeId)
})
slide.addEventListener('mouseout', function () {
// 鼠标离开自动开启定时器：就是把上面的代码复制一份
// 开启自动轮播 调用下面封装的方法
autoPlay()
})
// 给上一张和下一张添加点击事件
prev.addEventListener('click', function () {
// 更改下标
index = --index === -1 ? arr.length - 1 : index;
// 显示图片
img.src = arr[index];
// 重新渲染小圆点
render()
})
next.addEventListener('click', function () {
// 更改下标
index = ++index === arr.length - 1 ? 0 : index;
// 显示图片
img.src = arr[index];
// 重新渲染小圆点
render()
})
// 封装函数 鼠标移入前的轮播，和鼠标离开后的轮播代码重复
// 轮播图渲染方法
function autoPlay() {
timeId = setInterval(function () {
// 定义变量，保存默认显示的图片下标
// 更改下标 注意不能一直加 因为数组长度是4，超过4让它从0开始再次轮回（用三目运算）
index = ++index === arr.length ? 0 : index;
// 每隔一秒更换下一张图片路径
img.src = arr[index];
// 定时器开启时渲染小圆点重新激活
render()
}, 1000)
}
// 封装小圆点的渲染
function render() {
circles.innerHTML = arr.map(function (item, i) {
// i是当前小圆点 index是当前下标
return ` <span class=${index === i ? 'active' : ''}></span>`;
// 数组转字符串用join
}).join('');
}
</script>
