首页 前端知识 走马灯效果(html css js)

走马灯效果(html css js)

2024-04-20 16:04:52 前端知识 前端哥 864 332 我要收藏

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

源码如下:

参考: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);
})

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5396.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!