`
joerong666
  • 浏览: 418300 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

不间断连续图片滚动效果的制作方法

 
阅读更多

以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:
  先制作向上滚动的效果:
  插入代码:
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</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>


  制作向下滚动的效果:
  将上面“制作向上滚动的效果”中的红色字体Js部分替换成:
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

  制作向左滚动的效果:
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>

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


  制作向右滚动的效果:
  将上面“制作向左滚动的效果”中的红色字体Js部分替换成:
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

  制作的方法就简单的介绍完成了。

分享到:
评论

相关推荐

    flash特效 图片滚动效果

    "图片滚动效果"是Flash特效中的一个常见应用,通常用于展示一系列图片,如产品展示、新闻滚动或轮播图。这种效果使得图片能够不间断、无接缝地滚动展示,既美观又节省网页空间。 首先,我们要理解"不间断无接缝图片...

    Jquery实现图片列表横向和纵向不间断滚动插件实例源码

    "Jquery实现图片列表横向和纵向不间断滚动插件实例源码" 这个标题揭示了我们讨论的核心技术是使用Jquery库来创建一个动态效果,特别是针对图片列表的滚动展示。Jquery是一款广泛使用的JavaScript库,它简化了DOM操作...

    无缝隙图片向上滚动JS代码下载

    这种效果可以使图片在页面上自动、平滑地滚动,给人一种连续不间断的视觉体验。 【无缝隙图片滚动】是指在网页上展示多张图片时,当最后一张图片滚动到最顶部后,第一张图片紧接着出现在底部,形成一个没有明显断层...

    图片连续不间断滚动像册

    Fifty Studio│图片连续不间断滚动像册 #demo{overflow:auto; } } CSS 布局演示 CSS Layout by Forestgan 2006-10-30 发表   My Photo 1Design by Forestgan 演示页面设计制作: Forestgan ...

    DIV+CSS+JS不间断横向滚动实现代码

    总结而言,通过以上代码的分析,我们可以了解到如何利用DIV+CSS+JS组合来实现一个视觉上连续不间断的横向滚动效果。这种滚动效果在网页设计中广泛用于制作跑马灯、动态广告栏等元素,具有较高的实用价值和美观度。...

    jquery竖向的图文列表无缝循环滚动特效类似微博文字滚动.zip

    在网页设计中,这种特效可以为用户提供更加生动、吸引人的信息展示方式,类似于微博的滚动条功能,能够不间断地展示大量文本和图像内容。 【描述】描述中的“无缝循环滚动”指的是一个无限循环的效果,当列表的最后...

    一个显示中奖人员的滚动屏

    1. **无缝轮播技术**:无缝轮播是指在列表或图片展示过程中,当最后一个元素滚动出去时,第一个元素能够立即跟进,形成一种连续不间断的效果。这种技术主要通过JavaScript或CSS3动画实现,确保滚动过程平滑且无明显...

    左右循环滚动图片展示

    "循环"和"滚动"则强调了图片在容器内不间断地移动;"广告"表明这种技术常用于商业推广,增加视觉吸引力。 【压缩包子文件的文件名称列表】:6屏左右循环滚动图片代码 这个文件很可能是包含了一个实现6屏(或者表示...

    jq无缝轮播 鼠标移入停止,移出滚动.zip

    无缝轮播通常包含一组图片或内容,通过巧妙的布局和动画效果,使得在切换时给人一种连续、无中断的视觉体验。鼠标事件的监听和响应是这个功能的关键,通过jQuery的`.hover()`方法可以实现对鼠标移入和移出事件的监听...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典...

    动态网站第四讲(共39张PPT)精选.pptx

    5. 任务五:制作图片连续滚动效果,同样依赖于Javascript,实现图片不间断地滚动显示。 在进行这些任务之前,需要做好准备工作,比如解压ClassWeb压缩包,设置主目录,创建动态站点,以及在站点文件夹下创建媒体...

    js实现无缝循环滚动

    在这个例子中,为实现连续滚动效果,只需要让`box1`和`box2`在水平方向上连续移动,由于是两列相同内容的并列布局,所以即使内容滚动出容器范围,因为`box2`的图片内容和`box1`是一样的,用户仍然看不到任何的“断层...

    360度循环滚动Flash焦点图

    这是一种设计技巧,使得焦点图中的图片能够按照设定的时间间隔自动切换,形成连续的滚动效果。这种滚动通常是不间断的,用户也可以通过点击导航按钮手动切换。循环滚动的设计增强了用户体验,因为用户无需手动翻页就...

    8款超炫动画加载瀑布流.zip

    这种布局能够充分利用屏幕空间,同时保持视觉上的连续性,使用户可以无间断地滚动浏览内容。 而“动画加载”则是为了缓解用户在等待页面完全加载时的不耐烦情绪,通过展示有趣、吸引人的动画来分散注意力。这些动画...

    LTDC LCD(RGB屏).zip

    6. 动画制作:利用LTDC的刷新机制,通过逐帧更新帧缓冲区来实现动态效果,比如滚动文本、滑动图片等。 在实际应用中,这些代码可以作为基础,根据具体项目需求进行扩展和优化。例如,可以增加触摸屏支持,实现交互...

    基于jQuery实现无缝轮播与左右点击效果

    无缝轮播是一种特殊的轮播形式,指的是当用户浏览到最后一个元素时,能平滑过渡到第一个元素,没有任何明显的变化,实现连续不间断的滚动效果。此外,为了提升用户体验,通常还会在轮播图上加入左右点击(点击前一张...

Global site tag (gtag.js) - Google Analytics