prepareSlideshow()

本文介绍了一种使用JavaScript实现网页上的动态幻灯片效果的方法。通过动态创建元素并利用鼠标悬停事件改变幻灯片的位置,可以为网站访问者提供预览不同页面的效果。文章详细解释了代码的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Code:
  1. function prepareSlideshow(){   
  2. //  alert("prepareSlideshow()");   
  3.     if(!document.getElementsByTagName){return false;}    
  4.     if(!document.getElementById){return false;}   
  5.     if(!document.getElementById("intro")){return false;}   
  6.     var intro = document.getElementById("intro");   
  7.     var slideshow = document.createElement("div");   
  8.     slideshow.setAttribute("id","slideshow");   
  9. /*  var frame =document.createElement("img");  
  10. //  frame.setAttribute("src","images/frame.jpg");//??????  
  11.     frame.setAttribute("alt","");  
  12.     frame.setAttribute("id","frame");  
  13.     slideshow.appendChild(frame);*/  
  14.     var preview = document.createElement("img");   
  15.     preview.setAttribute("src","images/slideshow.jpg");   
  16.     preview.setAttribute("alt","a glimps of what awaits you");   
  17.     preview.setAttribute("id","preview");   
  18.     preview.setAttribute("width","2702");   
  19.     preview.style.position="absolute";   
  20.     //preview.style.left="300px";   
  21.        
  22.     slideshow.appendChild(preview);   
  23.     insertAfter(slideshow,intro);   
  24.   
  25.     var links=intro.getElementsByTagName("a");   
  26.     for(var i= 0 ;i<links.length;i++){   
  27.     //  alert("for");   
  28.         links[i].onmouseover=function(){   
  29.             var dextination = this.getAttribute("href");   
  30.             if(dextination.indexOf("index.html")!=-1){   
  31.                 moveElement("preview",0,0,5)   
  32.             }   
  33.             if(dextination.indexOf("about.html")!=-1){   
  34.                 moveElement("preview",-320,0,5)    
  35.             }   
  36.             if(dextination.indexOf("photos.html")!=-1){   
  37.                 moveElement("preview",-600,0,5)    
  38.             }   
  39.             if(dextination.indexOf("live.html")!=-1){   
  40.                 moveElement("preview",-900,0,5)    
  41.             }   
  42.             if(dextination.indexOf("contact.html")!=-1){   
  43.                 moveElement("preview",-1200,0,5)       
  44.             }   
  45.                
  46.         }   
  47.     }   
  48. }   
  49. addLoadEvent(prepareSlideshow);  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值