js练习-实现图片的幻灯片效果

浏览数：50 / 时间：2015年06月09日

1.实现效果：

2.实现主要思想：

三张图做成一个大图，点击某个链接，对链接判断从而对图片进行相应px大小的左移或者右移操作

3.代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>幻灯片效果-点击某个链接某张图移动</title>
  5 <meta charset="en">
  6 <style>
  7 #slideshow {
  8 width:1200px;
  9 height:40px;
 10 position:absolute;
 11 }
 12 #preview {
 13 position:absolute;
 14 border-width:0;
 15 outline-width:0;
 16 }
 17 </style>
 18 </head>
 19 <body>
 20 <div id=‘intro‘>
 21 <a href="dazhongdianping.html">dazhongdianping</a>
 22 <a href="gewala.html">gewala</a>
 23 <a href="taobao.html">taobao</a>
 24 </div>
 25 <script type="text/javascript">
 26 function moveElement(elementID,final_x,final_y,interval) {//对图片进行移动
 27     if ( !document.getElementById) 
 28     {
 29          return false;
 30     }
 31     if (!document.getElementById(elementID))
 32     {
 33         return false;
 34     }
 35     var elem=document.getElementById(elementID);//获取该图片元素
 36     if (elem.movement)
 37     {
 38         clearTimeout(elem.movement);//如果该元素有timeout的设置，则取消
 39     }
 40     if (!elem.style.left)
 41     {
 42         elem.style.left="0px";
 43     }
 44     if (!elem.style.top)
 45     {
 46         elem.style.top="0px";
 47     }
 48     var xpos=parseInt(elem.style.left);//获取当前图片的left值
 49     var ypos=parseInt(elem.style.top);
 50     if(xpos==final_x && ypos==final_y) 
 51     {
 52         return true;
 53     }
 54     if(xpos<final_x)
 55     {
 56         var dist=final_x-xpos;
 57         xpos=xpos+dist;
 58     }
 59     if(xpos>final_x)
 60     {
 61         var dist=xpos-final_x;//目的x值比当前的小，例如当前xpos=0.目的为-400
 62         xpos=xpos-dist;//xpos最终为-400，相当于左移400px
 63     }
 64     if (ypos<final_y)
 65     {
 66         var dist=ypos-final_y;
 67         ypos=ypos+dist;
 68     }
 69     if(ypos>final_y)
 70     {
 71         var dist=ypos-final_x;
 72         ypos=ypos-dist    
 73     }
 74     elem.style.left=xpos + "px";
 75     elem.style.top=ypos + "px";
 76     var repeat="";
 77     repeat="moveElement("+elementID+","+final_x+","+final_y+","+interval+")";
 78     elem.movement=setTimeout(repeat,interval);//5ms后对该图片元素进行移动
 79 }
 80 //准备工作，创建id="intro"的div，添加子元素<img>,为一大张图，水平包含即将移动的三张小图
 81 function  prepareSlideShow() {
 82                 if (! document.getElementsByTagName)
 83                 {
 84                 return false;
 85                 }
 86                 if (!document.getElementById)
 87                 {
 88                 return false;
 89                 }
 90                 if (!document.getElementById(‘intro‘))
 91                 {
 92                 return false;
 93                 }
 94                 var intro=document.getElementById(‘intro‘);
 95                 var slideshow=document.createElement(‘div‘);//创建滑动的div
 96                 slideshow.setAttribute("id","slideshow");
 97                 var preview=document.createElement("img");//创建滑动div内部的一张包含三个logo的图
 98                 preview.setAttribute("src","./1.jpg");//可以根据自己需要准备好图
 99                 preview.setAttribute("alt","a glimpse of  pictures");
100                 preview.setAttribute("id","preview");
101                 slideshow.appendChild(preview);
102                 intro.appendChild(slideshow);
103                 var links=intro.getElementsByTagName("a");//获取界面中的a标签。主要为三个logo对应 的标签
104                 var destination;//目的地
105                 for (var i=0;i<links.length;i++)
106                 {
107                     
108                     links[i].onclick=function(e){//给该a标签添加点击的处理事件
109                         e.preventDefault();//默认跳转到href的事件取消
110                         clearBackground();
111                         this.style.background="yellow";
112                         destination=this.getAttribute("href");//获取href中地址，判断移动位置
113                         if(destination.indexOf("dazhongdianping.html")!=-1){
114                         moveElement("preview",0,0,5);
115                         }
116                         if(destination.indexOf("gewala.html")!=-1) {
117                         moveElement("preview",-400,0,5);//图片向左移动400px
118                         }
119                         if(destination.indexOf("taobao.html")!=-1) {
120                         moveElement("preview",-800,0,5);//图片向左移动800px
121                         }
122                     }
123                 }                
124 }
125 
126 function clearBackground() {
127    var links=intro.getElementsByTagName("a");
128    for (var i=0;i<links.length;i++)
129     {
130         links[i].style.background="white";
131     }        
132 }
133 prepareSlideShow();
134 </script>
135 </body>
136 </html>