用roll.js实现的图片自动滚动+鼠标触动的特效

代码如下:

<!-- 
var sh; 
marqueesWidth=533; 
preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;

function scrollLeft() 

    if(stopscroll==true) return; 
    preLeft=marquees.scrollLeft; 
    marquees.scrollLeft+=2; 
    if(preLeft==marquees.scrollLeft) 
    { 
        //marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1; 
    } 
}

function scrollRight() 

    if(stopscroll==true) return;

preLeft=marquees.scrollLeft; 
    marquees.scrollLeft-=2; 
    if(preLeft==marquees.scrollLeft) 
    { 
        if(!getlimit) 
        { 
            marquees.scrollLeft=templayer.offsetWidth*2; 
            getlimit=marquees.scrollLeft; 
        } 
        marquees.scrollLeft-=1; 
    } 
}

function Left() 

    stopscroll = false; 
    sh = setInterval("scrollLeft()",20); 
}

function Right() 

    stopscroll = false; 
    sh = setInterval("scrollRight()",20); 
}

function StopScroll() 

    stopscroll = true; 
    clearInterval( sh ); 
}

function SelectType(value) 

    document.all.sendForm.page.value = 1; 
    document.all.sendForm.type.value = value;

document.all.sendForm.submit(); 
}

function init() 

    with(marquees) 
    { 
        style.height=0; 
        style.width=marqueesWidth; 
        style.overflowX="hidden"; 
        style.overflowY="visible"; 
        style.align = "center"; 
        noWrap=true; 
    } 
}

//-->

文件打包下载

(0)

相关推荐

  • wap图片滚动特效无css3元素纯js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所以下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面 问题根源主要是不能判断是点击还是拖动,手机

  • js图片闪动特效可以控制间隔时间如几分钟闪动一下

    图片一出来,过5秒钟,开始闪动,然后停止. var inter={}; var i=0; $(document).ready(function(){ $("a").each(function(index,item){ $(this).bind().click(function(){ i=index; if(inter!=null || inter.length>0){ window.clearInterval(inter); } window.setTimeout(functio

  • js实现九宫格图片半透明渐显特效的方法

    本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible {  FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • 用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • 动感超强的JS图片轮换特效

    动感超强的JS图片特效_我们 * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } img { margin:0; border:0; padding:0; } #eLore { position:relative; margin:0 auto; width:800px; height:339px; } #eLore_wrap { position:relative;

  • js 图片缩放特效代码

    图片特效 .lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:5%; left:5%;} .lightbox dt{background:#f4f4f4;} var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0]

  • 利用JS进行图片的切换即特效展示图片

    在网页制作的时候,需要利用JS进行特效展示图片,下面是利用JS简单制作的图片的切换. 复制代码 代码如下: <html> <head> <script type="JavaScript"> var srr = new Array('图片一', '图片二', '图片三', '图片四');//利用JS中内置的数组,进行数据的存储 var s = 0; function chage() { var img = document.getElementById

  • js图片模糊切换显示特效的方法

    本文实例讲述了js图片模糊切换显示特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>一款图片模糊切换显示效果</title> <body> <script language="JavaScript1.1"> <!-- var slidespeed=3000 var slideimages=new Array("/images/m01.jpg",&q

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

随机推荐