二款图片无缝滚动代码

<!--图片滚动代码开始-->
<div id=demo style="background: #ffffff; overflow: hidden; width: 551px; color: #ffffff; height: 138px">
        <table cellpadding=0 align=center border=0 cellspace="0">
          <tr>
            <td id=demo1 valign=top>
         <img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片"><img border="0" height="80" src="/edit/uploadfile/200642610592911.gif" width="105" alt="杜子电脑学习网图片">&nbsp;
</td> 
            <td id=demo2 valign=top></td>
                      </tr>
        </table>
<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.onmouseo教程ver=function() {clearinterval(mymar)}
             demo.onmouseout=function() {mymar=setinterval(marquee,speed)}
             </script>
</div>
        <!--图片滚动代码结束-->

备注:更改滚动方式,请修改相应未知的代码倒数第8行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        demo.scrollleft++    向左滚动
        demo.scrollleft--    向右滚动
        demo.scrolltop++     向上滚动
        demo.scrolltop--     向下滚动

备注:更改滚动方式,请修改相应未知的代码倒数第8行
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        demo.scrollleft++    向左滚动
        demo.scrollleft--    向右滚动
        demo.scrolltop++     向上滚动
        demo.scrolltop--     向下滚动

代码二

 

<html>
<head> </head>
<body>
</p>
<div id=demo style=overflow:hidden;height:300;width:150>
 <div id=demo1>
  <img src='roll/1.png'><br>
  <img src='roll/2.png'><br>
  <img src='roll/3.png'><br>
  <img src='roll/4.png'><br>
  <img src='roll/5.png'><br>
  <img src='roll/6.png'><br>
  <img src='roll/7.png'><br>
  <img src='roll/8.png'><br>
  <img src='roll/3.png'><br>
  <img src='roll/4.png'><br>
  <img src='roll/5.png'><br>
  <img src='roll/6.png'><br>
  <img src='roll/7.png'><br>
  <img src='roll/8.png'><br>
  <img src='roll/2.png'><br>
 </div>
 <div id=demo2></div>
</div>
<p>
  <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>
</p>
</body>
</html>

时间: 2024-07-30 10:11:02

二款图片无缝滚动代码的相关文章

图片无缝滚动代码(上下左右)js代码

<base href="http://www.111cn.net/">  <table width=700 border=0 cellpadding=0 cellspacing=0>                                                                                                           <tr><td>               

三款文字无缝滚动代码(上下左右)

<div id="marquees">   <a href="#">你可曾有过无数的梦想,</a><br>   <br>   <a href="#">却在时光的流逝里幻灭 </a><br>   <br>   <a href="#">你可曾对未来期待憧憬,</a><br>   <b

图片无缝滚动代码(向左/向下/向上)_javascript技巧

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

js实现图片无缝滚动_javascript技巧

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <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-

js实现图片无缝滚动特效_javascript技巧

首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter

marquee和js(javascript)图片无缝滚动方法集绵

下面是我在网上找的一个比较简单的marquee和js相结合解决图片无缝滚动的方法,包括向上.下.左.右四个方向滚动,下面给大家介绍一下: 先了解一下实例代码中用到的对象的几个的属性: 1.innerHTML:设置或获取位于对象起始和结束标签内的 HTML 2.scrollHeight: 获取对象的滚动高度. 3.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 4.scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 5.scroll

三款文字向上滚动代码

<title>三款文字向上滚动代码</title> <style type=text/css教程> #divascontainer {  clip: rect(0px 320px 120px 0px); height: 120px; left: 10px; overflow: hidden; position: absolute; top: 10px; visibility: hidden; width: 250px } #divascontent {  left: 0

js图片文字滚动代码

js图片文字滚动代码,本文章提供几款文字滚动的实例代码,大概原理是用js的时间来搞滑动效果哦. <script > var imgc = 1;//图片序列开始 var imgm = 5;//图片序列结束 var flag = 1;//标记鼠标移动 var tm;//定时器 //自动循环播放图片 function cgimg(){ if(flag==0)return; var mimg = document.getelementbyid("mimg"); mimg.src =