图片左右滑动幻灯片轮播效果【演示/源码下载】

在上一文中,我们介绍了《图片淡入淡出幻灯片轮播效果》,今天改变一下轮播效果,把淡入淡出改为左右滑动。

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 创建幻灯片