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

技术频道 - js技术

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

作者:admin 时间:2022-3-14 16:9:58 浏览:

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

图片左右滑动幻灯片轮播效果

demo download

功能介绍

自动切换轮播效果
鼠标移上去就会停下来
鼠标移开就会继续切换
向左向右切换
点击小圆点切换

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;即可，如果不修改，小横条是个正方形。

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)
}