如下所示:
<!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实现图片上下左右滚动代码[参考].pdf
用JS实现图片或文字向上或向下无缝隙滚动
js 控制图片上下左右滚动。例子。简单无缝滚动
这个效果,你也可以说是图片翻页吧,也可以说是一个图片轮显,基于HTML5...如果在手机上测试,那就是手向上滑或向下滑,图片一张一张翻页,可以修改成左右翻页切换那种,上下切换好像不常见,可为你提供一个参考吧。
js图片向上下左右滚动的代码 图片向上滚动js代码 图片向下滚动js代码 图片向左滚动js代码 图片向右滚动js代码
js实现图片上下左右滚动代码参照.pdf
jQuery实现鼠标滑过图片在图片上下滑动显示图片信息特效
zepto.js手机端网页上下手指滑动图片切换效果代码,兼容各种手机屏幕实现音乐播放,图片上下滑动。
本例通过js代码实现图片上下左右滚动,例子中有html文件关于滚动部分的书写格式
原生js代码制作首页焦点图片广告上下滚动轮播切换
很炫的图片无缝上下滚动效果
介绍了在JS中文字图片上下滚动的实现代码,需要的朋友可以参考一下
js 实现图片上下左右滚动及点击滚动图片弹出大图效果!
JS实现图片渐变,效果远超过图片切换 [removed][removed] [removed] var fadeimages=new Array(); fadeimages[0]=["1.jpg", "", ""]; fadeimages[1]=["2.jpg", "", ""]; fadeimages[2]=["3.jpg", "", ""]; ...
js实现图片轮播(一侧是展示的大图,一侧是可选的小图)且上下点击单个移动,也可点击图片切换
移动端图片放大滑动查看-插件photoswipe的使用:以实现手势放大缩小查看图片,左右滑动切换图片以及上下滑动关闭大图
本插件为用户提供在门户网站电商网站等出现的图片滚动效果,使用者只需要简单的配置即可使用,附件中提供插件及示例代码
实现文字无缝滚动+css无缝滚动,特别是phper,前后端不分离,需要自己写样式,该例子能很好的帮助到...不是使用marquee这个属性,这个属性有问题,滚动完一遍数据后不能实现无缝衔接,次案例采用的是css和js,开箱即用
主要介绍了JS实现的点击按钮图片上下滚动效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下