滚动图片

最新推荐文章于 2022-08-03 17:12:06 发布
最新推荐文章于 2022-08-03 17:12:06 发布
阅读量765 收藏
点赞数
分类专栏： web前端 文章标签： 滚动图片效果实现 跑马灯效果实现 跑马灯 不间断滚动图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_hy/article/details/9988217
版权 
以下代码可以直接复制，保存为html，简便的跑马灯效果。
主要利用scrollLeft的递增来实现滚动，利用两个一样的td来实现不间断。


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动图片</title>
<style type="text/css">
body,div{border:0;margin:0;padding:0;}
#demo li,dl {list-style:none;}
#demo {width:1000px;margin: 10px auto;}
IMG { BORDER: #ccc 1px solid; PADDING: 1px; WIDTH: 78px; HEIGHT: 78px; }
TD DL DT {MARGIN: 0px 5px 0px 0px;WIDTH: 80px;FLOAT: left;}
TD LI { WIDTH: 165px;COLOR: #333;FONT-SIZE: 12px;}
TD DL STRONG,span {DISPLAY: block;}
</style>
</head>
<body>
<div id="demo" style="overflow: hidden;" align="center">
<table cellspace="0" align="center" border="0" cellpadding="1" cellspacing="1">
<tbody><tr>
<td id="marquePic1" bgcolor="#ffffff" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201203062705.html" title="向勇" target="_blank"><img src=" http://www.timev.com/uploads/120317/34-12031G5044Y19.jpg "></a></dt>
<dd><strong>向勇</strong><span>天拓技术副总裁</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308093893.html" title="马勇" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/mayong1.jpg "></a></dt>
<dd><strong>马勇</strong><span>拓取网络CEO</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308053889.html" title="蒯佳祺" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/kuaijiaqi1.jpg "></a></dt>
<dd><strong>蒯佳祺</strong><span>安居客副总裁兼用户事业部总经理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201110312404.html" title="陈飞" target="_blank"><img src=" http://www.timev.com/uploads/111031/24-111031202045U3.jpg "></a></dt>
<dd><strong>陈飞</strong><span>浪潮集团总裁助理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201306063801.html" title="赵国强" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/zhaoguoqian1.jpg "></a></dt>
<dd><strong>赵国强</strong><span>阿里巴巴高级专家</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/20110117138.html" title="渠成" target="_blank"><img src=" http://www.timev.com/uploads/120319/32-120319141K0953.jpg "></a></dt>
<dd><strong>渠成</strong><span>Netconcepts中国区CEO</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201112062489.html" title="王宇阳" target="_blank"><img src=" http://www.timev.com/uploads/111206/32-111206150K2222.jpg "></a></dt>
<dd><strong>王宇阳</strong><span>夏易网络SEO分析师</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201111152458.html" title="谢泷纲" target="_blank"><img src=" http://www.timev.com/uploads/111116/27-111116113649260.jpg "></a></dt>
<dd><strong>谢泷纲</strong><span>808街联合创始人</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308083892.html" title="姜沈励" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/jiangshengli1.jpg "></a></dt>
<dd><strong>姜沈励</strong><span>1号店高级产品经理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201111212485.html" title="陆建平" target="_blank"><img src=" http://www.timev.com/uploads/120215/24-120215164359310.jpg "></a></dt>
<dd><strong>陆建平</strong><span>华东师范大学副教授</span></dd>
</dl>
</li>
</td>	
</tr>
</tbody></table>
</td>
<td id="marquePic2" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201203062705.html" title="向勇" target="_blank"><img src=" http://www.timev.com/uploads/120317/34-12031G5044Y19.jpg "></a></dt>
<dd><strong>向勇</strong><span>天拓技术副总裁</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308093893.html" title="马勇" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/mayong1.jpg "></a></dt>
<dd><strong>马勇</strong><span>拓取网络CEO</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308053889.html" title="蒯佳祺" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/kuaijiaqi1.jpg "></a></dt>
<dd><strong>蒯佳祺</strong><span>安居客副总裁兼用户事业部总经理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201110312404.html" title="陈飞" target="_blank"><img src=" http://www.timev.com/uploads/111031/24-111031202045U3.jpg "></a></dt>
<dd><strong>陈飞</strong><span>浪潮集团总裁助理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201306063801.html" title="赵国强" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/zhaoguoqian1.jpg "></a></dt>
<dd><strong>赵国强</strong><span>阿里巴巴高级专家</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/20110117138.html" title="渠成" target="_blank"><img src=" http://www.timev.com/uploads/120319/32-120319141K0953.jpg "></a></dt>
<dd><strong>渠成</strong><span>Netconcepts中国区CEO</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201112062489.html" title="王宇阳" target="_blank"><img src=" http://www.timev.com/uploads/111206/32-111206150K2222.jpg "></a></dt>
<dd><strong>王宇阳</strong><span>夏易网络SEO分析师</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201111152458.html" title="谢泷纲" target="_blank"><img src=" http://www.timev.com/uploads/111116/27-111116113649260.jpg "></a></dt>
<dd><strong>谢泷纲</strong><span>808街联合创始人</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201308083892.html" title="姜沈励" target="_blank"><img src=" http://www.timev.com/uploads/speaker picture/jiangshengli1.jpg "></a></dt>
<dd><strong>姜沈励</strong><span>1号店高级产品经理</span></dd>
</dl>
</li>
</td><td width="4%">
<li>
<dl>
<dt><a href="http://www.timev.com/event/2013sh/a/guest/201111212485.html" title="陆建平" target="_blank"><img src=" http://www.timev.com/uploads/120215/24-120215164359310.jpg "></a></dt>
<dd><strong>陆建平</strong><span>华东师范大学副教授</span></dd>
</dl>
</li>
</td>	
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</body>
<script type="text/javascript">
		var speed=20
		marquePic2.innerHTML=marquePic1.innerHTML 
		function Marquee(){ 
		if(demo.scrollLeft>=marquePic1.scrollWidth){ 
		demo.scrollLeft=0 
		}else{ 
		demo.scrollLeft++ 
		} 
		} 
		var MyMar=setInterval(Marquee,speed) 
		demo.οnmοuseοver=function() {clearInterval(MyMar)} 
		demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
		</script>
</html>


弘毅致远
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dw自动滚动图片_DW图片无缝滚动代码
weixin_39570777的博客
12-21 4198
DIV的图片无缝滚动,DIV图片上无缝滚动,DIV图片下无缝滚动,DIV图片左无缝滚动,DIV图片右无缝滚动1.先了解一下对象的几个的属性：innerHTML:设置或获取位于对象起始和结束标签内的HTMLscrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶...
dw自动滚动图片_Dreamweaver连续滚动图片的制作
weixin_42363565的博客
02-23 1696
该楼层疑似违规已被系统折叠隐藏此楼查看此楼横向不间断连续滚动图片,将下面代码放到你要显示的位置//morejavascriptfromhttp://www.smallrain.netdocument.write('');document.write('');document.write('');document.write('');document.write('');docum...
dw自动滚动图片_Dreamweaver实现滚动图片文字
weixin_39769984的博客
12-21 2005
06Dreamweaver8是美国Macromedia公司开发的集网页制作和网站管理于一身的所见即所得的网页编辑器，具有强大的编辑功能，能够方便地实现对网页创作的灵感，使设计者不必编写大量的HTML代码就能够实现特效。平常在网页上看到的公告板的滚动文字、最新的焦点新闻图片滚动、产品的宣传等都可以利用Dreamweaver8轻松实现，旨在对以上技巧进行说明。1留白滚动字幕和图片在网页中出现一些滚动字...
html中怎样滚动图片,CSS如何实现滚动的图片栏（代码实例）
weixin_39637723的博客
06-04 5474
本文给大家介绍CSS如何实现滚动的图片栏(代码实例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下主要原理是通过动画向左移动。首先给出两组一样的图片(同一行上)，让整体图片向左移动一组图片的长度，这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是...
HTML网页设计图片滚动,HTML网页上连续滚动图片的制作
weixin_39732491的博客
06-04 3728
制作方法：相关文件：在页面~相关位置加入代码：新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于文件。在每一张的图片上，添加特效：停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.f...
html加js实现滚动图片,js实现图片无缝滚动
weixin_42611310的博客
06-04 1237
js无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的javascript比较简单。主要的是使用js位置知识。1.innerHTML:设置或获取元素的html标签2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距3.offsetWidth:设置或获取指定标签的宽度4.setInterval():设置方法定时启动5.clearInte...
html不间断滚动图片,图片不间断滚动代码（详解）
weixin_35578119的博客
06-04 1174
先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。先了解一下对象的...
自动滚动图片怎么制作HTML,最简单的图片滚动.html
weixin_36141019的博客
05-31 2596
图片滚动a {text-decoration:none;}a:hover {text-decoration:none;color:#37a508;}.show {width:710px;height:240px;float:left;position:relative;margin:0 20%;}.show a {display:block;width:18px;height:35px;font-...
HTML页面增加滚动图片
秉持Love and share的态度去学习和生活
09-02 1268
<!--下面是向上滚动代码--> <div id=butong_net_top style=overflow:hidden;height:100;width:90;> <div id=butong_net_top1> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插入需要滚动的图片"> <img src="插..
vue实现循环滚动图片
qq_46617584的博客
08-03 2580
这篇文章主要为大家详细介绍了vue实现循环滚动图片，多图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5无限循环滚动图片展示
10-31
在这个"HTML5无限循环滚动图片展示"项目中，我们聚焦于HTML5的一个应用场景——创建一种具有3D效果的图片展示效果，这种效果能够无限循环地滚动图片。 首先，实现这种效果的关键在于HTML5的Canvas元素，这是一个...
无缝滚动图片
10-27
在IT领域，"无缝滚动图片"是一种常见的网页设计技术，用于在网站上展示连续、平滑过渡的图像序列，给予用户一种无边界、连续浏览的视觉体验。这种效果通常是通过JavaScript或者CSS3来实现的，使得图片在滚动到页面...
水平滚动图片网页特效
11-13
水平滚动图片网页特效是一种常见的网页设计手法，它能够为用户带来独特的浏览体验，尤其是在展示大量图片或需要强调视觉流动感的网站中。这种特效通常利用JavaScript、CSS3或者专门的库如jQuery来实现，使图片在水平...
滚动框滚动图片源码-易语言
06-12
本文将详细解析"滚动框滚动图片源码"这一主题，结合"进阶教程源码"的标签，我们将深入探讨如何在易语言中实现图片在滚动框内的动态展示。 首先，滚动框（Scroll Box）是窗口程序中常见的一种控件，它允许用户通过...
js向url中添加参数
热门推荐
zuo_hy的专栏
03-17 3万+
function addUrlPara(name, value) { var currentUrl = window.location.href.split('#')[0]; if (/\?/g.test(currentUrl)) { if (/name=[-\w]{4,25}/g.test(currentUrl)) { currentUrl = currentUrl.replace
js替换html代码标签
zuo_hy的专栏
03-18 7606
//体会html标签function escapeHTML(a) { return a.replace(//g, ">").replace(/&/g, "&").replace(/ /g, " ").replace(/"/g, """).replace(/'/g, "'") }
圆形图片CSS
zuo_hy的专栏
12-19 1752
border-radius: 50%; border: solid 5px #f4f4f4; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.2); box-shadow: 0 0 8px rgba(0,0,0,0.2);
javascript去掉前后空格
zuo_hy的专栏
12-12 1328
function WebForm_TrimString(value) { return value.replace(/^\s+|\s+$/g, '') } \s： space， 空格 +： 一个或多个 ^： 开始，^\s，以空格开始 $： 结束，\s$，以空格结束 |：或者 /g：global， 全局 replace() 替换
滚动标签滚动图片
最新发布
05-27
要实现滚动标签滚动图片，可以使用一些现成的JavaScript插件，比如Owl Carousel或Slick Carousel。这些插件可以让你轻松地创建一个可定制的滚动标签和滚动图片的UI界面。你可以使用HTML和CSS创建标签和图片的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值