javascript实现图片滚动效果

原创 2007年09月14日 12:18:00
           window.onload = rolloverInit;
           
//加载窗体时触发事件
                                          
        
function rolloverInit(){
            
for (var i=0; i<document.images.length; i++){
                
if(document.images[i].parentNode.tagName=="A"){
                    setupRollover(document.images[i]);
                }

            }

        }

        
//对所有包含超级连接的图片执行滚动设置


        
function setupRollover(thisImage){
            thisImage.outImage 
= new Image();
            thisImage.outImage.src 
= thisImage.src;
            thisImage.onmouseout 
= rollOut;

            thisImage.overImage 
= new Image();
            thisImage.overImage.src 
= thisImage.id + "_on.jpg";
            thisImage.onmouseover 
= rollOver;
        }

        
//为图片设置了out和over两种模式和相应的图片,可根据需要实际添加或修改


        
function rollOver(){
            
this.src = this.overImage.src;
        }

        
        
function rollOut(){
            
this.src = this.outImage.src;
        }

 相应在HTML中要对脚本进行引用,同时需要滚动效果的图片应包含在超连接<a herf="..."></a>中

 

相关文章推荐

纯javascript实现文字、图片无限滚动效果

使用说明:xMarquee(' 对象id ',' 滚动方向 ',' 偏移(正整数,越大滚动越快,默认 1) ',' 频率(正整数,越小滚动越快,默认 50) '); 根据个人需求可以对'偏移'和'频率...

javascript实现图片滚动效果

无标题文档 div{ position:absolute; } //获取图片div对象 var img=document.getElementById("divimg...
  • Oo__YAN
  • Oo__YAN
  • 2012年02月23日 21:02
  • 3501

javascript 实现新闻咨询图片滚动效果

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...

【web前端】JavaScript实现图片幻灯片滚动播放动画效果

JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...

javascript的setInterval实现图片滚动/图片轮播的效果

直接上代码, *{margin: 0; padding: 0;} #div0{width: 100%; height: 200px; border: 1px solid r...

JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden...

js实现图片平滑滚动效果

  • 2014年10月01日 00:33
  • 106KB
  • 下载

jQuery+CSS实现的图片滚动效果

  • 2013年03月18日 06:46
  • 36KB
  • 下载

JavaScript实现走马灯效果,上 下 左 右无缝连接、循环滚动

1 一 2 二 3 三 5 四 6 五 4 六
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript实现图片滚动效果
举报原因:
原因补充:

(最多只允许输入30个字)