js原生代码跑马灯效果纯js代码如下:
1.首先html的内容(里面图片自己可以换,li里面也可以填文字)
<div>
<ul>
<li>呵呵呵呵呵3</li>
<li>叽叽叽叽叽4</li>
<li>悠悠呦悠悠5</li>
<li>哎哎哎哎哎6</li>
<li><img src="img/pic/d2.png" alt=""></li>
<li></li>
<li></li>
<li>
<img id='img1' src="img/pic/z1.png">
</li>
<li>
<img src="img/pic/j1.gif" alt="">
<img src="img/pic/j1.gif" alt="">
<img src="img/pic/j1.gif" alt="">
</li>
</ul>
</div>
2.下面是我CSS设计代码如下:
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 690px;
}
div {
width: 400px;
height: 100%;
overflow: hidden;
border: 1px solid red;
margin: 20px auto;
background-color: cadetblue;
}
ul {
list-style: none;
width: 100%;
height: 120%;
margin-top: 0;
position: relative;
background-image: url("img/pic/b1.png");
background-size: cover;
}
ul li {
width: 100%;
height: 90px;
font-size: 20px;
line-height: 90px;
text-align: center;
transition: all 1s;
cursor: pointer;
}
li:hover {
color: burlywood;
}
img {
margin-left: 10px;
}
</style>
3.下面是重点js代码(里面我写了好多注释,供你查看)
window.onload = function() {
var s = 0;
var text = document.querySelector("ul"); //获取ul因为需要改变他要动
var li = document.querySelector("li"); //获取li因为要知道他的高
var lis; //声明一个全局变量
var id; //这个是定时器要用
console.log(li.offsetHeight);
var bbt = li.offsetHeight; //获取li的高度
add(); //这是我自己封装的跑马灯的方法()
function add() {
id = setInterval(function() { //首先声明定时器
s -= 1; //全局变量本来是零//每次让他减10;
if (Math.abs(s) >= bbt) { //如果他的s值的绝对值比li的高还大就执行下面的方法
s = 0; //把他s赋值为0;
var li = document.querySelector('li'); //获取li元素,现在默认选择的就是第一个li
var ppt = li.cloneNode(true); //然后复制这个当前的li。
text.removeChild(li); //删除第一个li
text.appendChild(ppt); //删除后再添加他,实现一值循环的思想
text.style.marginTop = s + "px"; //改变ul的外上边距的距离为0;
}
text.style.marginTop = s + "px"; //这一步也是改变ul的外上边距的距离实现往上动的效果
}, 10); //0.01秒一动
}
text.onmouseenter = function() { //当我们鼠标放在了ul上面
lis = document.querySelectorAll('li'); //首先获取现在里面所有的li元素
for (var i = 0; i < lis.length; i++) { //循环遍历li伟数组
lis[i].onmouseenter = function() { //循环给li绑定鼠标放下的事件
for (var i = 0; i < lis.length; i++) { //这一点是排他思想,首先让全部的li字体为20
lis[i].style.fontSize = '20px';
}
clearInterval(id); //放到了li上面清除定时器
this.style.fontSize = '25px'; //让你放上去的li字体放大
}
}
}
text.onmouseleave = function() { //当我们鼠标离开ul
for (var i = 0; i < lis.length; i++) { //首先排他一下,让所有字体都回到原来的大小
lis[i].style.fontSize = '20px'; };
setTimeout(function() { //0.3秒后执行下面的跑马灯效果!
add();
}, 300);
}
}
4.嗯这就是完整的js代码了
效果如下