图片无缝轮显

转载 2006年06月22日 12:54:00
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com"> 
<div id=demo style=overflow:hidden;height:150;width:88;background:#214984;color:#ffffff>
<div id=demo1><!-- 定义图片 --><img src="images/logo_1.gif" border="0"><img 

src="images/logo/flashempire.gif" border="0"><img src="images/logo.gif" border="0"><img 

src="images/logo/5dmedia.gif" border="0"><img src="images/logo/macromedia.gif" 

border="0"><img src="images/logo/sucaiw.gif" border="0"><img src="images/logo/blueieda.gif" 

border="0"><img src="images/logo/htmlcn.gif" border="0"><img src="images/logo/fwcn.gif" 

border="0"></div>
<div id=demo2></div>
</div>

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

jquery实现图片无缝轮播显示(个人随笔)

图片无缝轮播显示 .box,.box2{ width:800px; height:260px; ...
  • bboyjoe
  • bboyjoe
  • 2016年04月06日 16:03
  • 1180

利用jquery写无缝循环滑动的轮播图

1.效果gif图: 2.主要实现思想: a.第一层div,设置overflow为hidden b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以。 c.li设置...
  • Szu_AKer
  • Szu_AKer
  • 2016年04月22日 23:14
  • 26089

图片无缝滚动的原理和实例

无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%; 原理:第一个盒子相对浮动,第二个盒子绝对浮动,让...
  • stopcpp
  • stopcpp
  • 2016年10月12日 10:55
  • 2607

html中图片无缝滚动代码及学习体会

我的第一篇博文 最近在学习HTML标记语言和JAVASCRIPT,HTML与CSS还好上手,JS已经有点难度啦,因为JS对大小写很敏感,一不小心就会错或者不出效果,下面我就把最近学习的一些小经验和心...
  • u014687186
  • u014687186
  • 2014年04月13日 12:07
  • 1457

marquee图片无缝拼接滚动

marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动...
  • zhuyu19911016520
  • zhuyu19911016520
  • 2014年04月25日 15:47
  • 10488

使用js实现图片轮滑效果

经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了。 首先贴出html代码: document ...
  • neal1991
  • neal1991
  • 2015年10月21日 19:57
  • 1033

网页图片无缝循环滚动html代码

图片循环滚动代码 图片无缝滚动代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆...
  • baolibin528
  • baolibin528
  • 2014年08月18日 00:03
  • 2306

JS原生代码实现图片轮播无缝切换的一种思路

JS实现图片轮播是个老生常谈的问题,也是新手的必由之路,在这里提供一种思路,供大家参考: 1.生成DIV做外框,并设置overflow:hidden;  // 每个方法都必须有的 2.创建一个数组ar...
  • hnxieyi
  • hnxieyi
  • 2016年05月02日 23:27
  • 11001

常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

var speed=30; var colee2=document.getElementById("colee2"); var colee1=document.getElementById("cole...
  • Honey_Potter
  • Honey_Potter
  • 2016年12月20日 14:59
  • 2751

JS让图片无缝滚动的实现(JS代码讲解,非直拷型内容)

为了教学需要,整理了一下JS图片无缝滚动的代码。 以前一直均是拷贝网上的经典JS滚动代码,稍为更改即成自己的了,现重新讲解下,JS是如何让图片们动起来的! 下面是网上源码,百度一大堆,多数是这个样...
  • learn_2
  • learn_2
  • 2016年11月16日 16:19
  • 1754
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片无缝轮显
举报原因:
原因补充:

(最多只允许输入30个字)