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>
时间： 2024-10-04 15:38:00