说明：兼容火狐和IE，上下滚动代码需去掉HTML页面顶部一行!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=gb2312" />
<title>向上下左右不间断无缝滚动图片的效果（兼容火狐和IE）-JS特效学院|JsWeb.Cn</title>
</head>
<body><!--下面是向上滚动代码-->
<div id=jsweb8_cn_top style=overflow:hidden;height:100;width:90;>
<div id=jsweb8_cn_top1>
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
<img src="http://jsweb8.cn/images/logo.gif">
</div>
<div id=jsweb8_cn_top2></div>
</div>
<script>
var speed=30
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
function Marquee1(){
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
else{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<p></p>
</body>
</html>
*******************************************
上面是html的源代码，把代码保存成.htm的文件打开就能看到效果，呵呵
分享到：
相关推荐
在前端开发中，创建动态、吸引用户的界面效果是至关重要的，而“js单排图片自动滚动效果代码”就是一个实现这种效果的例子。这个压缩包中包含的代码主要用于制作一个JavaScript驱动的图片滚动展示，通常用于网站的 ...
【标题】中的“原创原生态纯js单排图片自动滚动效果代码”指的是一个使用JavaScript（简称js）编写的代码示例，它实现了图片在一行（单排）内自动平滑滚动的效果。这种效果常见于网站的轮播图或展示区域，能够吸引...
通过以上步骤，我们可以创建一个基本的JavaScript图片自动滚动效果。实际项目中，还可以根据需求进行更多定制，如添加触摸滑动支持、自动暂停当鼠标悬停等特性。在`js`和`css`文件中，可以找到具体实现这些功能的...
当用户点击某张图片时，会计算出下一张图片的位置（如果已经是最后一张则返回第一张），然后淡出当前图片，同时淡入下一张图片，营造出平滑的滚动效果。 在实际项目中，为了使代码更加健壮和适应性强，我们还可以...
【jQuery左右图片自动滚动特效】 在网页设计中，图片滚动效果常常被用于展示产品或服务，为用户带来更丰富的视觉体验。"jQuery左右图片自动滚动特效"是一个利用jQuery库实现的动态图片展示功能，它允许图片以自动化...
在Android开发中，图片自动滚动通常涉及到ImageView的轮播效果，这种效果常见于广告轮播、相册预览等场景。下面将详细讲解如何在Android中实现图片自动滚动的效果。 一、基本概念与原理 图片自动滚动的核心是利用...
标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片，以滚动的方式呈现，使得用户无需手动翻页就能浏览到...
总结来说，"jQuery图片左右滚动效果代码"是通过jQuery的DOM操作、事件处理和动画制作等功能，结合自动轮播和左右箭头交互，实现了一种动态的图片展示效果。这样的代码对于提升网站的视觉吸引力和用户体验有着重要...
在这个主题中，我们将深入探讨如何使用jQuery这一强大的JavaScript库来实现图片自动滚动效果，并且允许自定义下一页和上一页按钮。 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
在网页设计中，图片自动滚动是一种常见的动态效果，它可以增加网站的互动性和视觉吸引力。这种效果通常用于展示产品图库、新闻更新或者广告轮播。本文将深入探讨如何实现图片自动滚动实例，以及相关的技术要点。 一...
在Android开发中，实现自动滚动图片的效果是一种常见的需求，尤其在创建轮播图、广告栏或者相册应用时。这个源码是开发者个人实现的一种自动滚动图片的功能，它基于Android的`Gallery`组件。`Gallery`是Android SDK...
在图片滚动效果中，这些元素可以用来包裹每一张图片，并提供相应的描述或标题。例如： ```html 图片1"> 这是图片1的描述 ``` 其次，CSS3（层叠样式表）在HTML5中发挥了重要作用，特别是在动画和过渡效果方面。...
在本案例中，“js图片自动滚动”是一个使用JavaScript实现的网页功能，它能够让图片在网页上按照预设的方式自动滚动展示，提升用户体验，特别是在产品展示、新闻轮播等场景下尤为常见。 首先，我们要理解JavaScript...
总结，通过JavaScript实现图片自动滚动和手动控制是一项涉及HTML、CSS和JavaScript多方面技术的任务，需要理解DOM操作、事件监听、动画效果以及用户交互设计。通过不断学习和实践，你可以创建出具有出色用户体验的...
例如，可以设置autoplay属性为true，使得图片可以自动播放，从而实现自动滚动效果。在实际开发中，除了autoplay，还有其他属性如interval（控制自动切换的时间间隔）、circular（是否使用衔接滑动）等可以用于优化...
在IT行业中，图片缓冲滚动效果是一种常见的用户界面（UI）设计技术，特别是在产品展示或图像密集型应用中，能够提供流畅、高效的用户体验。这个技术主要应用于网页、移动应用或者桌面软件，通过预先加载和缓存图片，...
【标题】"很炫的图片无缝上下滚动效果.rar"是一个包含JavaScript实现的动态图片滚动效果的资源包。这种效果常用于网站的图片展示，能够给用户带来流畅且引人注目的视觉体验，使得图片相册更加生动活泼。 【描述】...
JavaScript可以设置定时器，每隔一定时间自动改变图片显示，从而达到滚动效果。CSS3则可以通过transform和transition属性来平滑地改变图片的位置，创建动画效果。在描述中提到，这个代码可能解决了其他代码仅能自动...
本示例将详细介绍如何利用ViewPager实现自动滚动效果，以及如何将其优化为一个简单的轮播图。 首先，我们来理解ViewPager的基本原理。ViewPager是一个可以左右滑动查看多个页面的控件，通常与PagerAdapter配合使用...
在JavaScript编程中，实现“图片滚动按钮控制图片左右自动滚动”的功能是一项常见的需求，尤其在网页设计和用户体验优化中。这种技术可以增加交互性，使用户能够更方便地浏览一系列图片。下面我们将深入探讨如何使用...