网站建设实践报告zen cart 网站google plus
题十二：轮播图
要求：
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
原理：
- 当鼠标进入时，左走箭头出现，定时器关闭，离开时，箭头消失，定时器开启。
- 写DOM对应的小圆点，找让图片文字小圆点的高亮移除，再当索引值到了之后，添加高亮事件.
- 当点击左图右图是分别修改其对应的索引号.
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义轮播图</title><style>#container {margin: 0 auto;position: relative;width: 600px;height: 600px;overflow: hidden;}#container img {width: 100%;height: 100%;background-size: cover;display: none;}#container img.active {display: block;}.arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 30px;color: white;background: rgba(0, 0, 0, 0.3);padding: 10px 15px;cursor: pointer;display: none;}#left {left: 10px;}#right {right: 10px;}#dots {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}#dots span {width: 10px;height: 10px;border-radius: 50%;background: gray;margin: 0 5px;cursor: pointer;}#dots span.active {background: white;}.name {position: absolute;bottom: 0;width: 100%;background: rgba(0, 0, 0, 0.5);color: white;padding: 10px;text-align: center;font-size: 30px;}</style>
</head><body><div id="container"><img src="./任务/交互图片/1.jpg" alt="图片1" class="active"><div class="name">fall'in out</div><img src="./任务/交互图片/2.jpg" alt="图片2"><div class="name">找自己</div><img src="./任务/交互图片/3.jpg" alt="图片3"><div class="name">单车恋人</div><span id="left" class="arrow"><</span><span id="right" class="arrow">></span><div id="dots"></div></div><script>const Container = document.querySelector('#container')const images = document.querySelectorAll('#container img')const names = document.querySelectorAll('.name')const dotsContainer = document.getElementById('dots')const Left = document.querySelector('#left')const Right = document.querySelector('#right')//当前显示图片的索引let currentIndex = 0//命名自动播放定时器let autoplayIntervalfunction onMouseEnter() {//鼠标一进入就关闭定时器clearInterval(autoplayInterval)Left.style.display = 'block'Right.style.display = 'block'}function onMouseLeave() {//开启startAutoplay()Left.style.display = 'none'Right.style.display = 'none'}Left.addEventListener('click', () => {clearInterval(autoplayInterval)//一定要调用leftImage()});Right.addEventListener('click', () => {clearInterval(autoplayInterval)rightImage()})Container.addEventListener('mouseenter', function() {onMouseEnter()})Container.addEventListener('mouseleave', function() {onMouseLeave()})// 显示指定索引的图片function showImage(index) {images.forEach((img, i) => {//先全部移除高亮img.classList.remove('active')//文字也先不显示names[i].style.display = 'none'})dotsContainer.querySelectorAll('span').forEach((dot, i) => {//小圆点高亮移除dot.classList.remove('active')})//到相应的索引号，高亮和文字显示images[index].classList.add('active')names[index].style.display = 'block'//小圆点高亮添加dotsContainer.querySelectorAll('span')[index].classList.add('active')//修改索引号currentIndex = index}function createDots() {//回调函数，函数对应的DOM元素及索引号images.forEach((_, index) => {//新建小圆点，有几个DOM建几个const dot = document.createElement('span')if (index === 0) {//默认高亮类名dot.classList.add('active')}dot.addEventListener('click', function() {//一旦点击，关闭定时器clearInterval(autoplayInterval)showImage(index)})//根据DOM数量，添加小圆点dotsContainer.appendChild(dot)});}// 右图function rightImage() {//index+1currentIndex = (currentIndex + 1) % images.lengthshowImage(currentIndex)}// 左图function leftImage() {//同理currentIndex = (currentIndex - 1 + images.length) % images.lengthshowImage(currentIndex);}function startAutoplay() {autoplayInterval = setInterval(rightImage, 1500)}// 调用小圆点和自动播放，使页面一开始就有效果createDots()startAutoplay()</script>
</body></html>
轮播图