实现歌词效果自动滚动_JS实现图片自动滚动(图片横向滚动)

朴灿烈づ我的快乐病毒、 2023-01-07 07:21 53阅读 0赞

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

首先看下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的变化进行横向滚动,代码的讲解都在注释中,快来试一下吧！

效果图如下：

![eea0b0e3480f7d2317c47b74b7b81581.png][]

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

[eea0b0e3480f7d2317c47b74b7b81581.png]: /images/20221119/299bca50bbe1475d838c651b72457700.png

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关实现歌词效果自动滚动_JS实现图片自动滚动(图片横向滚动)

实现的效果就是一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动首先看下html代码:随便加入四张图片 <div id="div1"> <ul> <

朴灿烈づ我的快乐病毒、/ 2023年01月07日 07:21/ 0 赞/ 54 阅读

相关 html横向自动滚动代码,横向不间断滚动效果代码

完整DIV+CSS+JS不间断横向滚动代码：横向不间断滚动DIV .scroll\_div \{width:600px; height:49px;margin:0 aut

短命女/ 2022年10月05日 12:49/ 0 赞/ 447 阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 410 阅读

相关实现屏幕自动滚动

使用滚动视图控件ScrollView的方法比较简单，只需要在LinearLayout外面增加一个ScrollView标记即可： <ScrollView xmlns:a

男娘i/ 2022年09月24日 04:21/ 0 赞/ 316 阅读

相关 javaScript实现图片滚动

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title>Demo Te

迷南。/ 2022年08月10日 11:49/ 0 赞/ 262 阅读

相关【easyui】datagrid横向滚动条自动滚动功能

在datagrid的onLoadSuccess函数中，做如下处理 //根据当前时刻，判断滚动条滑动的位置 var myDate

分手后的思念是犯贱/ 2022年06月16日 07:19/ 0 赞/ 1419 阅读

相关 swiper.js插件实现图片滚动效果

swiper.js插件实现图片滚动效果 1、页面初始化效果： ![Center][] 2、Html如下 <!DOCTYPE html> <ht

偏执的太偏执、/ 2022年06月05日 04:54/ 0 赞/ 525 阅读

相关 android 图片自动滚动

要实现图片自定轮显，首先要会使用ViewPager控件，还不会使用ViewPager的同学可以[https://blog.csdn.net/zenmela2011/articl

偏执的太偏执、/ 2022年05月27日 05:38/ 0 赞/ 253 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 575 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 866 阅读