笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果。于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增加了一个类似弹幕效果,下面直接上代码(原生js)。
一.图片跑马灯
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
min-height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
ul {
position: absolute;
}
li {
list-style: none;
float: left;
width: 350px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul class="goods">
<li>
<a href="javascript:">
<img src="./goods19.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods18.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods17.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods16.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods15.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="./goods14.jpg" alt="">
</a>
</li>
</ul>
</div>
<script>
let box = document.querySelector('.box');
let ulObj = document.querySelector('.goods');
let liArr = ulObj.children;
let newUl = ulObj.cloneNode(true);
box.appendChild(newUl); //添加克隆元素
let wid = (liArr[0].offsetWidth + 10) * liArr.length + 'px'; //获取ul宽度
newUl.style.left = wid; //克隆的ul的位置
//console.log(newUl.style.left);
var timer = setInterval(sta, 30); //设置定时器 一开始就动起来
function sta()