js图片滚动效果时间可随意设定当鼠标移上去时停止_javascript技巧

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 1000px;
}

#demo img {
border: 10px solid #F2F2F2;
}

#indemo {
float: left;
width: 800%;
}

#demo1 {
float: left;
}

#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="images/小美景1.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景2.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景3.jpg" border="0" />
</a>
<a href="#"><img src="images/小美景4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女4.jpg" border="0" />
</a>
<a href="#"><img src="images/小美女2.jpg" border="0" />
</a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=50;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索图片滚动
鼠标移上
javascript滚动条事件、javascript 滚动事件、javascript滚动到底部、javascript图片滚动、javascript 滚动条,以便于您获取更多的相关知识。

时间: 2016-06-26

js图片滚动效果时间可随意设定当鼠标移上去时停止_javascript技巧的相关文章

JS 图片滚动效果做出来后点击图片的链接怎么弄

问题描述 我直接改varlinks=""不行啊怎么改 解决方案 解决方案二:你下载这个例子,修改一下图片和里面对应的链接即可.解决方案三:但那个链接怎么弄呢我的是在ASP.NET的基础上的解决方案四:你用flash做的,这个我帮不了你了,个人建议你去17素材网找一个纯css或者html实例的图片轮播的model,这里的model可以在图片外套a标签什么的,就方便加链接了.你这种滚动效果是人家自动给你生成的代码,不好改解决方案五:varlinks=""是不是页面的路径

[转]JS图片滚动效果

From: http://bbs.blueidea.com/thread-2762084-1-1.html 演示效果:http://bbs.blueidea.com/thread-2762084-1-1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&

js图片滚动效果代码

时尚新潮 时尚新潮 时尚新潮 时尚新潮 时尚新潮 时尚新潮 时尚新潮 时尚新潮

js图片滚动效果

提示:您可以先修改部分代码再运行 提示:您可以先修改部分代码再运行

对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明_javascript技巧

修改的 lightbox 版本是 2.04 版. 下面是使用我们在使用 lightbox 来显示图片时的基本设置: 复制代码 代码如下: <a href="image-url" rel="lightbox" title="image-remark"> content </a> 主要是给连接加了一个 rel="lightbox" 属性 以上面的试设置好连接时, 当点击此连接,lightbox 将会显示连接

Flash中实现JS的图片滚动效果

js 网页中的图片滚动效果,js的对象不太熟,就用flash来了. 大体的流程. 图片加载,效果层加载,设定效果层的_x,_y,使之于图片一一对应. 然后鼠标事件,鼠标经过,stopMove,鼠标点击,openPIC in IE. 图片循环不见断的实现模型: var picNum:Number;//总图片数,解析xml可得.  var picMargin:Number=5;//设置pic的间隔;  if(pic._x<(0-pic._width)){  pic._x=(pic._width+pi

js+div实现图片滚动效果代码

 本篇文章主要是对js+div实现图片滚动效果的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 横向  <div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"    onmouseout="doscroll()">  <div id=&qu

js图片滚动: 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-Typ

JS无缝滚动效果实现方法分析_javascript技巧

本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无