html li标签横向排列_JS实现图片自动滚动(图片横向滚动)

实现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动

首先看下html代码:随便加入四张图片

<div id="div1">

<ul>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

<li><img src="img/logo-black.png" alt=""></li>

</ul>

</div>

CSS代码:

*{

margin: 0;

padding: 0;

}

#div1{

width: 712px;

height: 108px;

margin: 100px auto;

position: relative;

overflow: hidden;

}

#div1 ul{

position:absolute;

left: 0;

top: 0;

}

#div1 ul li {

float: left;

width: 178px;

height: 108px;

list-style: none;

margin-left: 10px;

}

JS代码:

<script>

window.οnlοad=function(){

var oDiv = document.getElementById('div1');

var oUl = document.getElementsByTagName('ul')[0];

var Li = oUl.getElementsByTagName('li');//获取ul下的所有li

oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加

oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度

var speed = 2

//主方法

function move(){

//如果左边横向滚动了长度一半之后,回到初始位置

if(oUl.offsetLeft<-oUl.offsetWidth/speed){

oUl.style.left = '0'

}

//如果右边横向滚动的距离大于0 就让他的位置回到一半

if(oUl.offsetLeft>0){

oUl.style.left = -oUl.offsetWidth/speed+'px';

}

//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动

oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动

}

//调用方法

var timer = setInterval(move,30)

//鼠标指向的时候 暂停

oDiv.οnmοuseοver=function(){

clearInterval(timer);

}

//鼠标离开之后 继续滚动

oDiv.οnmοuseοut=function(){

timer = setInterval(move,30)

}

}

</script>

主要思路就是,给一个延时定时器,根据offsetLeft的变化进行横向滚动,代码的讲解都在注释中,快来试一下吧！

效果图如下：

https://www.zhihu.com/video/1231327351721979904