一、实现功能如下:
1:进入指定区域,关闭定时器;离开时,开启定时器
2:有左右两个按键实现对图像的左右切换展示
3:可以通过下方小圆点,实现对图像的切换展示
二、具体实现如下:
①首先创建一个基础的框架:
html 部分:
<div style="width: 300px;height: 260px;" class="mainContainer">
<!-- 图片展示 -->
<div style="width: 300px;height: 200px;">
<img style="width: 300px;height: 200px;">
</div>
<!-- 图片介绍 -->
<div style="width: 300px">
<span> </span>
<div style="display: inline;float: right;">
<button class="leftButton">
< </button>
<button class="rightButton"> > </button>
</div>
</div>
<!-- 圆点显示 -->
<div style="width: 300px;padding: 0;">
<ul class="list">
<li>
<div class="circle"></div>
</li>
<li>
<div class="circle"></div>
</li>
<li>
<div class="circle"></div>
</li>
</ul>
</div>
</div>
上述代码实现了:div + img + button + (空格的 ul li)
接着是 css 部分:
ul {
list-style-type: none;
}
ul li {
display: inline-block;
padding: 0;
}
.circle {
width: 10px;
height: 10px;
border-radius: 100%;
border-style: solid;
}
.active {
border-radius: 100%;
border-style: solid;
width: 11px;
height: 11px;
border-color: rgb(171, 22, 22);
}
上述实现了 ul>li中的小黑圆点,和图片切换之后的 小红圆点
②然后是 js 部分
0:初始化,展示一个图片
// 初始化
imAge.src = img[0].src // 添加图片
imAge.title = img[0].title // 给图片添加标题
titleText.innerText = img[0].title // 添加 文本注释
lis[i].classList.add('active')
1:首先有一个定时器
用于自动展示图片 (1s 做一个切换(切换前,需要移除原先的样式))
timerId = setInterval(function () {
lis[i].classList.remove('active')
i == 2 ? i = 0 : i++
imAge.src = img[i].src // 添加图片
imAge.title = img[i].title // 给图片添加标题
titleText.innerText = img[i].title // 添加 文本注释
lis[i].classList.add('active')
}, 1000)
2:进入指定区域,关闭定时器;离开时,开启定时器
// 鼠标经过关闭定时器
mainContainer.addEventListener('mouseenter', function () {
clearInterval(timerId)
})
// 鼠标离开 开启定时器
mainContainer.addEventListener('mouseleave', function () {
timerId = setInterval(function () {
lis[i].classList.remove('active')
i == 2 ? i = 0 : i++
imAge.src = img[i].src // 添加图片
imAge.title = img[i].title // 给图片添加标题
titleText.innerText = img[i].title // 添加 文本注释
lis[i].classList.add('active')
}, 1000)
})
3:有左右两个按键实现对图像的左右切换展示
//右侧按钮
const rightBtn = document.querySelector('.rightButton')
rightBtn.addEventListener('click', function () {
// console.log(11);
lis[i].classList.remove('active')
i == 2 ? i = 0 : i++
imAge.src = img[i].src // 添加图片
imAge.title = img[i].title // 给图片添加标题
titleText.innerText = img[i].title // 添加 文本注释
lis[i].classList.add('active')
})
//左侧按钮
const leftBtn = document.querySelector('.leftButton')
leftBtn.addEventListener('click', function () {
// console.log(11);
lis[i].classList.remove('active')
i == 0 ? i = 2 : i--
imAge.src = img[i].src // 添加图片
imAge.title = img[i].title // 给图片添加标题
titleText.innerText = img[i].title // 添加 文本注释
lis[i].classList.add('active')
})
4:可以通过下方小圆点,实现对图像的切换展示
// 给小圆点添加点击事件
for(let j=0;j<3;j++){
circleLis[j].addEventListener('click',function(){
lis[i].classList.remove('active')
imAge.src = img[j].src // 添加图片
imAge.title = img[j].title // 给图片添加标题
titleText.innerText = img[j].title // 添加 文本注释
lis[j].classList.add('active')
i = j
})
}
三、 结果展示
轮播图