div+js实现首尾相连循环滚动效果

最新推荐文章于 2021-12-03 09:37:15 发布
最新推荐文章于 2021-12-03 09:37:15 发布
阅读量6.5k 收藏 2
点赞数
分类专栏： WEB JS
WEB 同时被 2 个专栏收录
85 篇文章 0 订阅
订阅专栏
JS
59 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<HEAD> 
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE> 
</HEAD> 
<BODY> 
用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br /> 
<DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:955px;"><span>
<a href="http://www.yicas.cn/dct/page/65651"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=687" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65607"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=603" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65744"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=779" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65913"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=903" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65743"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=777" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65606"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=599" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/66148"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1141" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/66154"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1147" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/65624"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=662" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/66034"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1029" 

/></strong></a>

<a href="http://www.yicas.cn/dct/page/66050"><strong><img width="77" height="107" alt="" src="http://159.226.11.94/clb/getCachedDocument.do?docid=1045" 

/></strong></a>
	</span></DIV> 
<script language="javascript" type="text/javascript"> 
<!-- 
function scroll(obj) { 
var tmp = (obj.scrollLeft)++; 
//当滚动条到达右边顶端时 
if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; 
//当滚动条滚动了初始内容的宽度时滚动条回到最左端 (此处可以根据需要选择是否注释)
//if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; 
} 
setInterval("scroll(document.getElementById('scrollobj'))",20); 
//--> 
</script> 
</BODY> 
</HTML>

 

 

原文链接：http://www.jb51.net/article/28358.htm

叮咚侠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
前端学习CSS3(day3)使用动画实现无缝滚动
weixin_41571938的博客
04-11 370
效果图： 原理：一个div里面ul放多张图片 然后创建动画，设置动画的相应状态，非常简单，不再叙述 看源码 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margi
纯css和js完成向上滚动的跑马丁效果，收尾相连
binghuozhi的博客
05-11 434
html/jsp代码： <div id="fu" style="position:relative;width:300px;height:260px;overflow:scroll"> <div id="er1"> <table id="gdtable" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="im
插件封装:无限循环滚动
Byte_Dance的博客
12-31 397
这个方法需要注意的是 : img元素必须要在CSS内先指定宽度,不然等JS去设置宽度的时候,由于图片本身加载进来的时候是图片原来的尺寸,当加载过程中鼠标一旦滑动了一下,就会触发hover离开的函数,这时候再鼠标滑动进去,相当于执行了两次hover离开,就会出现滚动停不下来的情况. 为防止 定时器累加 这种情况出现,也可以给定时器上做好预防(即开启定时器之前 都要先关闭定时器): &l...
2017-11-21 循环滚动 js方法
qq_39509597的博客
12-21 171
无标题文档 ul{ margin: 0px; padding: 0px; list-style: none; width: 1280px; } li{ float: left; } #div1{ margin: 0px auto; width: 320px; height: 80px; overflow: hidden; }
js实现首尾相连的文字滚动效果
vicky_lxw的博客
07-26 1677
最近单位的小同事问了一个问题，就是在页面底部的位置实现字体滚动的效果。若利用进行滚动的话，必须等上一次滚动出屏幕才可以看到下一次进入的文字，这样的效果很不好，滚动区域时常会出现大片空白，用户体验不好。         为了解决这个问题，只能自己想办法了。我的想法是需要有两遍重复的文字，然后判断第一遍文字的位置从而适时引入第二段并将第一段的文字append到第二段文字的后面，以此类推。
分别用marquee和div+js实现首尾相连循环滚动效果，仅3行代码
10-28
总结来说，`<marquee>`标签提供了一种简单快速的实现循环滚动的方式，但其浏览器兼容性有限。而使用`div`配合JavaScript可以实现更广泛的浏览器支持，尽管代码稍微复杂一些。在实际应用中，应根据项目需求和目标用户...
ViewPager+Fragment实现自动循环滚动
03-08
首先，要实现`ViewPager`的循环滚动，常规的`ViewPager`默认是不支持首尾相连的，即不能从第一个页面直接滑到最后一个，反之亦然。但是，通过添加额外的首项和末项，我们可以模拟出这种循环的效果。具体实现方法是在...
javascript实现状态栏文字首尾相接循环滚动的方法
10-23
主要介绍了javascript实现状态栏文字首尾相接循环滚动的方法,实例分析了javascript定时函数及页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
12-08
div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果（仅IE）： 代码如下: ”scroll” contenteditable=”true” xss=removed scrollamount=”3″ width=”...
ViewPager 实现gallery效果+无限循环滚动
04-08
在本教程中，我们将深入探讨如何利用ViewPager实现一个类似画廊（Gallery）的效果，并且让其能够无限循环滚动。 首先，我们要了解ViewPager的基本用法。ViewPager是Android Support Library的一部分，它允许用户在...
JQUery实现上下循环滚动效果
08-03
运用JQUery原生方法实现文字上下循环滚动效果，我这里的是文字，你也可以换成图片。
vue 或者 css动画 怎么实现列表【向上无缝滚动】
weixin_50450473的博客
12-03 1679
方法一：vue的实现方法 <div id="publishMain" class="b_list"> <div id="publishMain1"> <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex"> <!-- 循环的内容 --> </div> </div> <div id="publishMain2...
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3017
1、npm安装 npm install vue-seamless-scroll --save 2、引入 import scroll from 'vue-seamless-scroll' 官方demo:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 3、使用 ...
Div+CSS无缝滚动终极版
海阔天空的专栏(web前端+LAMP)
11-18 1558
  向左滚动body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding:0px;list-style:none;}.sqBorder {width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}.scroll
分别用marquee和div+js实现首尾相连循环滚动效果
37度2
02-18 7552
分别用marquee和div+js实现首尾相连循环滚动效果，特效代码非常精简，仅3行实现！ 分别用marquee和div+js实现首尾相连循环滚动效果 用marquee实现首尾相连循环滚动效果（仅IE）： 这里是要滚动的内容 用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）： 这里是要滚动的内容 <!-- function
html来回交替滚动,JS实现的DIV块来回滚动效果示例
weixin_42338883的博客
06-10 505
本文实例讲述了JS实现的DIV块来回滚动效果。分享给大家供大家参考，具体如下：Insert title herefunction ls(){var p=true;//开关,true开,false关var xx=document.getElementById('xx');var xxleft = parseInt(xx.style.left);var speed = 20;var t=setInte...
div自动滚动_Vue无限滚动组件
weixin_39546747的博客
11-27 1101
源码地址demo演示组件效果如下：当我们滚动列表内容到底部的时候，会自动加载新的内容到列表容器中，而不是一次性请求所有内容。下面我们会通过Vue中的自定义指令来一步步实现该组件。使用组件首先需要通过Vue.use来注册组件，之后为需要滚动的列表容器添加v-infinite-scroll指令。代码如下：<需要注意的是，组件的参数通过html属性传入，传入的值为字符串，并且要和data中返回的属...
CSS实现上下循环滚动效果
热门推荐
杨春建的博客
07-26 1万+
原文地址：https://codepen.io/lilyH/pen/CjrHl HTML：               第一行数据         第二行数据       CSS：      .wrap{height:30px;overflow: hidden;position: absolute;top:30;left: 100;width: 100%}    
html无缝滚动怎么重复,JS实现无缝循环marquee滚动效果
weixin_31301993的博客
06-09 263
= obj.firstChild.offsetWidth)// obj.scrollLeft = 0;if ($obj.scrollLeft() >= obj.firstChild.offsetWidth)$obj.scrollLeft(0);}/*除了Chrome以外的浏览器可以通过scrolleft()滚动/function initMarquee(){var aaa = docume...
在uniapp中实现首尾相连的跑马灯效果
最新发布
05-31
在uniapp中实现首尾相连的跑马灯效果，可以使用scroll-view组件实现。具体操作如下： HTML代码： ``` <div>{{marqueeText}}</div> <div>{{marqueeText}}</div> <div>{{marqueeText}}</div> <div>{{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值