图片左右滑动幻灯片轮播效果【演示/源码下载】
在上一文中，我们介绍了《图片淡入淡出幻灯片轮播效果》，今天改变一下轮播效果，把淡入淡出改为左右滑动。
demodownload
功能介绍
- 自动切换轮播效果
- 鼠标移上去就会停下来
- 鼠标移开就会继续切换
- 向左向右切换
- 点击小圆点切换
HTML
<div>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<span class="direction" id="left"> < </span>
<span class="direction" id="right"> > </span>
<div class="dots">
<span id="active" class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
外层DIV标签，是幻灯片盒子区域，内层的DIV标签，是幻灯片底部的小圆点区域。
ul li列表标签，是轮播图片。
两个span标签，是向左向右箭头。
CSS
/* 清空边距 */
* {
margin: 0;
padding: 0;
}
/* 轮播图样式 */
img {
width: 500px;
height: 300px;
}
li {
list-style: none;
float: left;
}
ul {
width: 2500px;
position: absolute;
top: 0px;
/* 设置右边的距离即可 */
left: 0px;
/* 如果不想要轮播效果可以把下面这行代码注释掉 */;
transition-duration: 1s;
}
div {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
top: 100px;
left: 400px;
}
/* 左右两侧样式 */
div:hover .direction {
display: block;
background-color: grey;
}
.direction {
position: absolute;
font-size: 50px;
cursor: pointer;
display: none;
border-radius: 50%;
opacity: 0.5;
}
#left {
top: 110px;
left: 30px;
}
#right {
top: 110px;
right: 30px;
}
/* 下面五个点 */
.dot {
width: 20px;
height: 20px;
border-radius:10px;
background-color: grey;
display: inline-block;
margin-left: 30px;
cursor: pointer;
}
#active {
background-color: red;
}
.dots {
width: 300px;
height: 20px;
position: absolute;
left: 100px;
margin-top: 170px;
}
ul样式属性中，使用了transition-duration，该属性以秒或毫秒为单位指定过渡动画所需的时间，默认值为 0s，表示不出现过渡动画。
div:hover .direction{}定义鼠标移上后左右两方向箭头的样式。
.dot{}定义幻灯片底部5个点的样式。.dots{}定义幻灯片底部5个小圆点的位置。
如果想把小圆点改为小横条，则只需把
.dot{}里的border-radius:10px;删除，同时把.dots{}里的height: 20px;改为height: 10px;即可，如果不修改，小横条是个正方形。
JS
let pos = 0;
let timer;
let num;
// 对应小红点亮函数
function toRed()
{
let dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++)
{
dots[i].id = "";
}
num = -pos / 500;
dots[num].id = "active";
}
function setTimer()
{
timer = setInterval(() =>
{
document.querySelector("ul").style.left = pos + "px";
// 对应点亮起来
toRed();
// 递减
pos -= 500;
if (pos == -2500)
{
pos = 0;
}
}, 2000)
}
setTimer();
// 移入停下，移开运行
document.querySelector("div").addEventListener("mouseover", () =>
{
clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", () =>
{
setTimer();
})
// 左右两边
document.querySelector("#left").addEventListener("click", () =>
{
pos += 500;
if (pos == 500)
{
pos = -2000;
}
document.querySelector("ul").style.left = pos + "px";
toRed();
})
document.querySelector("#right").addEventListener("click", () =>
{
pos -= 500;
if (pos == -2500)
{
pos = 0;
}
document.querySelector("ul").style.left = pos + "px";
toRed();
})
// 点击小圆点对应亮色
let dots = document.querySelectorAll(".dot");
for (let i = 0; i < dots.length; i++)
{
(function(i)
{
dots[i].addEventListener("click", () =>
{
num = i;
pos = -num * 500;
document.querySelector("ul").style.left = pos + "px";
toRed();
})
})(i)
}
toRed()是小红点高亮函数，把当前图片对应的小红点的id值设为active，其余小红点id值设为空。
setTimer()是计时器，设置图片轮播间隔时间。
程序写了很多addEventListener监听函数，mouseover是鼠标以上，mouseout是鼠标移开，click是鼠标点击。
总结
本文介绍了图片左右滑动幻灯片轮播效果，使用了CSS+JS来实现，代码量少，清晰易懂，修改简单，如果你也喜欢这个轮播效果，那么下载本文实例稍作修改即可使用。
您可能对以下文章也感兴趣
- CSS+js实现图片淡入淡出幻灯片轮播效果
- jQuery创建滑动幻灯片
- jQuery+CSS3实现图片自动轮换淡入淡出效果
- 百叶窗过渡的幻灯片/轮播动画【效果演示/源码下载】
- 如何将 Bootstrap 4 Carousel 更改为淡入淡出过渡而不是滑动
- 【实例】淡入淡出幻灯片/自动轮播动画效果
- 纯CSS实现的左右滑动幻灯片
- 纯CSS实现的幻灯片/轮播效果【高级动画】
- 【实例】使用 HTML、CSS 和 JavaScript 创建幻灯片
