实用的JavaScript相册程序。原创在原创中成长。

zoukankan html css js c++ java

实用的JavaScript相册程序。原创在原创中成长。

代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>无标题文档</title>
  6 <style type="text/css">
  7 
10 </style>
11 </head>
12 <body onload="GoON();">
13 <div style="200px; margin:0 auto; position:relative; line-height:20px">
14     <div style="200px; height:250px; position:relative; overflow:hidden">
15        <div id="photos" style="height:250px; position:absolute; 600px; background-color:#000000; color:#FFFFFF; left:0; top: -2px;"><div style="height:250px; 200px; float:left"><img alt="图片1" src="" height="250px" width="200px" /></div>
16         <div style="height:250px; 200px; float:left"><img alt="图片2" src="" height="250px" width="200px" /></div>
17         <div style="height:250px; 200px; float:left"><img alt="图片3" src="" height="250px" width="200px" /></div>
18        </div>
19     </div>
20     <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid" ><span onclick="GoLeft();">《左翻</span></div>
21     <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid"><span onclick="GoRight();">右翻》</span></div>
22     <div style="cursor:pointer; text-align:center; border:1px #CCCCCC solid; overflow:hidden">
23        <div style="30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(0)">1</div>
24        <div style="30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(1)">2</div>
25        <div style="30px; float:left; background:#000000; color:#FFFFFF; cursor:pointer" onclick="GoOnAndPlay(2)">3</div>
26     </div>
27     <div><span style="font-weight:bold; cursor:pointer" onclick="AutoAlign()">自动对齐</span><br />
28     </div>
29 </div>
30 <script>
31    var Dir ={ Left:true,Right:false}
32    var speed2 = 100;                  //设置完成一次移动的时间 ※ 这句可以看成是废话，个人认为有必要。可直接给speed赋值 ※
33    var width = 200;                   //完成一次移动的宽度
34    var mtime = 5;                     //每次小一定的时间间隔
35    var speed = (width*mtime)/speed2;  //每次移动宽度        ※ 此值要为整数 ※
36    var wflg = 0;                      //移动宽度标志
37    var moveWidth = 200;               //移动辅助变量
38    var rgt;                           //左移一次标志
39    var lft;                           //右移一次标志
40    var tflg = 0;                      //全局移动宽度标志
41    var direction = Dir.Right;         //初始化移动方向
42    var autoflg;                       //自动播放标志
43    var count=5;                       //图片个数
44     //左移一次
45    function GoLeft()
46    {
47        clear();
48        if(ResSetDir(Dir.Left))
49        {
50            tflg += moveWidth;
51            lft = setInterval("LeftMove()", mtime);
52        }
53    }
54    //右移一次
55    function GoRight()
56    {
57        clear();
58        if(ResSetDir(Dir.Right))
59        {
60            tflg -= moveWidth;
61            rgt = setInterval("RightMove()",mtime)
62        }
63    }
64    //重置移动方向
65    // dirt 为方向枚举类型
66    function ResSetDir(dirt)
67    {
68        clear();
69        var can = true;
70        if(tflg==GetObj('photos').scrollWidth-moveWidth)
71        {
72            if(dirt) can = false;
73        }
74        else if(tflg==0)
75        {
76            if(!dirt) can = false;
77        }
78        if(can)
79        { direction = dirt; }
80        return can;
81    }
82    //左边移动一个标志
83     function LeftMove()
84    {
85         if(wflg<width-width%speed)
86         {
87             GetObj('photos').style.posLeft += -speed;
88             wflg += speed;
89         }
90         else
91         {
92             GetObj('photos').style.posLeft += -width%speed;
93             wflg = 0;
94             clear();
95             GoON();
96         }
97    }
98
99    //右边移动一个标志
100    function RightMove()
101    {
102         if(wflg<width-width%speed)
103         {
104             GetObj('photos').style.posLeft += speed;
105             wflg += speed;
106         }
107         else
108         {
109             GetObj('photos').style.posLeft += width%speed;
110             wflg = 0;
111             clear();
112             GoON();
113         }
114    }
115    //自动改变方向
116    function AutoChangeDir()
117    {
118        if(tflg == 0)
119        {
120            direction = Dir.Left;
121        }
122        if(tflg==GetObj('photos').scrollWidth-moveWidth)
123        {
124            direction = Dir.Right;
125        }
126    }
127
128    //自动移动
129    function AutoMove()
130    {
131         AutoChangeDir();
132         if(direction)
133         {
134             GoLeft();
135         }
136         else
137         {
138             GoRight();
139         }
140         //autoflg = setTime(AutoMove(),5000);
141    }
142    //获取Dom
143    function GetObj(id)
144    {
145        return document.getElementById(id);
146    }
147    function GoON()
148    {
149        AutoAlign();
150        autoflg = setInterval("AutoMove()",5000);
151    }
152    //移动到第几个位置上:
153    function GoOnAndPlay(id)
154    {
155         var lef = GetObj('photos').style.posLeft;
156         var tolef = 0-id*width;
157         var len = Math.abs(lef - tolef);
158         if((tolef-lef)>0)
159         {
160             //向右移动
161            clear();
162            if(ResSetDir(Dir.Right))
163            {
164                tflg -= len;
165                rgt = setInterval(function(){ RightMoveLen(len);},mtime*width/len)
166            }
167         }
168         else if((tolef-lef)<0)
169         {
170             //向左移动
171            clear();
172            if(ResSetDir(Dir.Left))
173            {
174                tflg += len;
175                lft = setInterval(function(){ LeftMoveLen(len);}, mtime*width/len);
176            }
177         }
178         else if(tolef == lef )
179         {
180             //不移动
181         }
182    }
183    //左边移动规定长度
184    function LeftMoveLen(w)
185    {
186         if(wflg < w-w%speed)
187         {
188             GetObj('photos').style.posLeft += -speed;
189             wflg += speed;
190         }
191         else
192         {
193             GetObj('photos').style.posLeft += -width%speed;
194             wflg = 0;
195             clear();
196             GoON();
197         }
198    }
199
200    //右边移动规定长度
201    function RightMoveLen(w)
202    {
203         if(wflg < w - w%speed)
204         {
205             GetObj('photos').style.posLeft += speed;
206             wflg += speed;
207         }
208         else
209         {
210             GetObj('photos').style.posLeft += width%speed;
211             wflg = 0;
212             clear();
213             GoON();
214         }
215    }
216
217    //自动补齐
218    function AutoAlign()
219    {
220         clear;
221         var zlens = new Array(count);
222         var bestponit = 0;
223         for(var i = 0 ; i < count ; i++ )
224         {
225             zlens[i] = i*width + GetObj('photos').style.posLeft;
226         }
227         //取出小值
228         var bestponit = 0;
229         for(var i = 0 ; i < count - 1 ; i++ )
230         {
231             bestponit = Math.abs(zlens[i+1]) - Math.abs(zlens[i]) < 0 ? i + 1 : bestponit;
232         }
233         GetObj('photos').style.posLeft = -(bestponit*width);
234         AutoChangeDir();
235         //GoON();
236    }
237
238    function clear()
239    {
240         clearInterval(lft);
241         clearInterval(rgt);
242         clearInterval(autoflg);
243    }
244 </script>
245 </body>
246 </html>
247

查看全文

相关阅读:
python脚本2_输入2个数比较大小后从小到大升序打印
 python脚本1_给一个半径求圆的面积和周长
 配置双机互信
 如何在 CentOS7 中安装 Nodejs
Git 服务器搭建
 docker安装脚本
 CentOS7下安装Docker-Compose
Linux 文件锁
 6 系统数据文件和信息
 bash脚本编程之二字符串测试及for循环

原文地址：https://www.cnblogs.com/cestbon/p/JavaScriptPhotos.html