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

js实现图片上下滚动

阅读更多

如下所示:

 

<!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>
</head>
<body>
	   <div id="demo" style="clear:both; overflow:hidden; height:134px;width:188px;margin:0 auto;">
<div id="demo1">
<!-- 定义图片 -->
<ul>
        	<li><img src="images/pic/jycy_02.jpg" width="188" height="134" /></li>
<li><img src="images/pic/jycy_03.jpg" width="188" height="134" /></li>
<li><img src="images/pic/jycy_04.jpg" width="188" height="134" /></li>
<li><img src="images/pic/jycy_05.jpg" width="188" height="134" /></li>
</ul></div>
<div id="demo2"></div>
</div>
	  <script>
var speed=30
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetTop-document.getElementById("demo").scrollTop<=0)
document.getElementById("demo").scrollTop-=document.getElementById("demo1").offsetHeight
else{
document.getElementById("demo").scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
 
分享到:
评论

相关推荐

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...

    js 图片上下左右滚动

    JavaScript(简称JS)是一...总结来说,利用JavaScript实现图片的上下左右滚动涉及到了基本的JS编程、事件处理以及DOM操作。通过组合这些技术,我们可以创建出各种富有动态性的网页交互,为用户提供更丰富的视觉体验。

    js实现图片上下左右滚动代码[参考].pdf

    这里提供的代码示例展示了如何使用 JavaScript 实现图片的上下滚动效果。 首先,我们来看向下滚动的代码部分。这部分代码创建了一个名为 `colee` 的 div 元素,设置了固定的高度和宽度,并且设置 `overflow:hidden`...

    js 上下(左右)图片滚动

    实现图片上下滚动,通常会涉及到CSS的`position`属性和JavaScript的`setInterval`函数。以下是一个简单的步骤: 1. 创建HTML结构,包括一个可以容纳图片的容器,并设置其CSS样式,如设置`overflow:hidden`隐藏超出...

    js实现图片上下无缝隙滚动

    用JS实现图片或文字向上或向下无缝隙滚动

    JS控制图片上下无缝滚动特效代码

    7. **JavaScript库与框架**:虽然可以直接使用原生JS实现,但为了简化代码和提高效率,可以借助现有的JavaScript库或框架,如jQuery、React或Vue等,它们提供了丰富的功能和便利的方法,能更快地实现图片滚动效果。...

    js图片向上下左右滚动的代码 图片向上滚动js代码

    本示例主要讲解如何使用JavaScript实现图片的上下滚动。 首先,我们来看标题和描述中提到的关键点:`js图片向上下左右滚动的代码` 和 `图片滚动`。这些关键词暗示我们要创建一个JavaScript函数,该函数能够控制HTML...

    图片上下滚动带按钮

    标题“图片上下滚动带按钮”描述的是一个网页或应用程序中的交互设计功能,用户可以通过点击页面上下的两个按钮来实现图片的上下滚动。这种设计常见于图片展示、产品介绍或者滑动浏览场景,使得用户可以方便地查看...

    HTML5手机图片轮显切换 上下滑动图片翻页.rar

    这个效果,你也可以说是图片翻页吧,也可以说是一个图片轮显,基于HTML5...如果在手机上测试,那就是手向上滑或向下滑,图片一张一张翻页,可以修改成左右翻页切换那种,上下切换好像不常见,可为你提供一个参考吧。

    VANCL凡客图片上下滑动javascript代码

    "VANCL凡客图片上下滑动javascript代码"是一个专门用于实现图片在网页中上下滑动的JavaScript特效,它能够为网站增添互动性和视觉吸引力。这个特效的核心是利用JavaScript语言来控制DOM元素(Document Object Model...

    图片上下滚动带控制按钮,兼容所有浏览器

    在网页设计中,实现“图片上下滚动带控制按钮”是一种常见的动态效果,它能为用户提供更直观、便捷的浏览体验。这种效果尤其适用于展示多张图片的场景,如产品展示、摄影集或画廊等。下面我们将深入探讨如何实现这个...

    JS图片无缝、平滑、上下左右滚动

    总结,实现JS图片无缝、平滑、上下左右滚动的关键在于理解和运用HTML、CSS和JS三者的协同工作。通过HTML构建页面结构,CSS提供视觉效果,而JS则是驱动这些元素动态变化的核心。通过不断优化和调整,我们可以创建出既...

    javascript上下无缝图片滚动

    JavaScript 上下无缝图片滚动是一种常见的网页动态效果,用于展示一系列图片,给用户带来更丰富的视觉体验。这种技术常被应用于产品展示、轮播广告或图片画廊等场景,如糯米网的产品展示。在这个效果中,图片会按照...

    很炫的图片无缝上下滚动效果.rar

    【标题】"很炫的图片无缝上下滚动效果.rar"是一个包含JavaScript实现的动态图片滚动效果的资源包。这种效果常用于网站的图片展示,能够给用户带来流畅且引人注目的视觉体验,使得图片相册更加生动活泼。 【描述】...

    js原生图片上下无缝滚动

    以上就是使用原生JavaScript实现图片上下无缝滚动的基本方法。通过结合HTML、CSS和JavaScript,我们可以创建出一个动态、流畅的滚动效果,为网页增添更多趣味性和交互性。在实际应用中,还可以根据项目需求进行...

    js实现图片上下左右滚动代码参照.pdf

    在JavaScript中实现图片的上下左右滚动效果是一种常见的网页动态效果,可以吸引用户的注意力并增加页面的互动性。这里我们将详细探讨如何使用JavaScript实现一个简单的图片向下滚动的效果。 首先,我们看到HTML部分...

    网页中图片上下左右滚动js

    至此,我们已经解释了如何通过JavaScript实现图片的上下左右滚动。`pic`文件可能包含多张图片,可以将代码稍作修改,使其支持多个图片的滚动,或者根据实际需求调整滚动速度和方向。这个例子提供了一个基础的框架,...

    原生js代码制作首页焦点图片广告上下滚动轮播切换

    至此,我们就完成了用原生JavaScript实现的首页焦点图片广告上下滚动轮播切换。这种方法不仅简单易懂,而且可以根据需求进行灵活的定制和扩展。通过深入了解JavaScript的DOM操作、事件监听以及动画效果,你可以创造...

    图片的上下滚动用js和flash技术

    通过这些文件,我们可以分析实现图片上下滚动的具体代码和逻辑。 5. **现代网页技术**:虽然Flash曾经非常流行,但随着HTML5的普及,现在更倾向于使用HTML5的Canvas或SVG,以及JavaScript的库如jQuery、Vue.js、...

Global site tag (gtag.js) - Google Analytics