无缝滚动 封装代码

<script>

function wfgd(a,b,c,d){
    var a=document.getElementById(a);
    var b=document.getElementById(b);
    var c=document.getElementById(c);
    var d=d||20;
    var Auto=null;
        c.innerHTML=b.innerHTML;
        function auto(){
            if(a.scrollLeft>b.offsetWidth){
            a.scrollLeft-=b.offsetWidth;
            }else{
            a.scrollLeft++
            }
        }
    Auto = setInterval(function(){auto()},d);
    a.onmouseover=function(){
        clearInterval(Auto)
    }
    a.onmouseout=function(){
        Auto = setInterval(function(){auto()},d);
    }
}
wfgd("scroll","all01","all02") 传入参数 id

</script>
时间: 2024-12-08 09:28:17

无缝滚动 封装代码的相关文章

无缝滚动js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> * {margin: 0;padd

js图片无缝滚动代码

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

关于网页中的无缝滚动

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页        观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInter

横向无缝滚动

<!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

banner轮播无缝滚动万金油jq代码

HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li> </ul> </div> JQ: 调用:$(function(){ setinterval(functon(){ scroll($(".box ul")); },1000); }) 封装:function scroll(obj){ var h=obj.fi

常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 今天刚网上看的 不多说直接帖代码---- <head><-----></head><body> <!--向下滚动代码开始--><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p>&

产品图片无缝水平滚动效果代码

产品图片无缝水平滚动效果代码:在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如何实现此特效的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

jquery图片无缝滚动代码左右 上下无缝滚动图片

<!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-

文字列表无缝向上滚动JavaScript代码

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>文字列表无缝向上滚动JavaScript代码-代码库</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} a{color:#333333; text-decoration:none;} a:hover{color