走马灯效果（html+css+js）

最新推荐文章于 2024-05-30 10:50:01 发布

快滚去学习！

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量1.7k

点赞数 4

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_53185464/article/details/131270849

版权

首先，先来看走马灯效果展示

源码如下：

参考：HTML5+CSS3+JS小实例：可切换方向的无缝衔接图片滚动效果_哔哩哔哩_bilibili

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>可切换方向的无缝衔接图片滚动效果</title>
    <link rel="stylesheet" href="149.css">
</head>

<body>
    <div class="app">
        <div class="container">
            <ul>
                <li><img src="/images/a.JPG" alt=""></li>
                <li><img src="/images/b.JPG" alt=""></li>
                <li><img src="/images/c.JPG" alt=""></li>
                <li><img src="/images/d.JPG" alt=""></li>
            </ul>
        </div>
    </div>

    <script src="149.js"></script>
</body>

</html>

css

* {
  /* 初始化 */
  margin: 0;
  padding: 0;
}
body {
  background-color: black;
}
.app {
  /* 100%窗口高度 */
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 弹性布局 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1b1b1b;
}
.container {
  width: 800px;
  /* 相对定位 */
  position: relative;
  /* 溢出隐藏 */
  overflow: hidden;
}
ul {
  width: 800px;
  height: 150px;
  overflow: hidden;
  display: flex;
  position: relative;
}
li {
  list-style: none;
  height: 100%;
  padding-right: 20px;
}
li img {
  width: 200px;
  height: 150px;
  /* 保持原有尺寸比例，裁切长边 */
  object-fit: cover;
  /* 图片定位正中间 */
  object-position: center;
}
.btns {
  display: flex;
  justify-content: center;
  padding-top: 50px;
}
.btn {
  color: #fff;
  border: 1px solid #ddd;
  padding: 5px 15px;
  margin: 0 15px;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

js

// 获取ul元素，并为其追加一组相同图片（为了做到无缝衔接）
let ul = document.querySelector('ul');
ul.innerHTML = ul.innerHTML + ul.innerHTML;
// 获取所有的li元素和.btn元素
let lis = document.querySelectorAll('li');
// 每次滚动的跨度（正数向右，负数向左，默认向左滚动）
let spa = -2;
// 计算并设置ul的总宽度
ul.style.width = lis[0].offsetWidth * lis.length + 'px';

// 滚动函数
function move() {
    if (ul.offsetLeft < -ul.offsetWidth / 2) {
        // 向左走时，判断图片是否走完（这里本来时4张图片，加上后面追加的4张相同的，共有8张，所以需要用ul的总宽度来除以2进行判断），走完时重新开始
        ul.style.left = '0';
    }
    if (ul.offsetLeft > 0) {
        // 向右走时，判断图片是否走完
        ul.style.left = -ul.offsetWidth / 2 + 'px';
    }
    // 设置偏移位置
    ul.style.left = ul.offsetLeft + spa + 'px';
}

// 定时器，每30毫秒执行一次move函数
let timer = setInterval(move, 30);

// 为ul绑定事件，悬停停止，移开滚动
ul.addEventListener('mousemove', function () {
    clearInterval(timer);
})
ul.addEventListener('mouseout', function () {
    timer = setInterval(move, 10);
})