连续滚动图片的制作
类别: JavaScript教程 
连续滚动的图片，一般都是用Flash制作，现在我们使用Script制作同样的效果：
制作方法：
在页面<body>~</body>相关位置加入代码：
新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于 2004082021demo.htm 文件。
在每一张的图片上，添加特效：
停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果：style="cursor:hand
都添加至<img src="XXX.jpg">，也可以加入图片的超级链接！
再新建2004082021scroll.htm页面文件，该文件为控制图片滚动的页面。在<head>~</head>中，加入代码：
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;
function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}
function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout("scrollnow()", 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}
}
// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}
scrollnow();
//***********************************
//-->
</SCRIPT>
注意，代码中：var limdex=600; 数字的取值计算为：单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算，使用的单张图片宽度为120px，共使用５张，所以var limdex的数字值为６００。
连续滚动的图片的特效就制作完成了！
制作方法：
在页面<body>~</body>相关位置加入代码：
新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于 2004082021demo.htm 文件。
在每一张的图片上，添加特效：
停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果：style="cursor:hand
都添加至<img src="XXX.jpg">，也可以加入图片的超级链接！
再新建2004082021scroll.htm页面文件，该文件为控制图片滚动的页面。在<head>~</head>中，加入代码：
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;
function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}
function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout("scrollnow()", 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}
}
// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}
scrollnow();
//***********************************
//-->
</SCRIPT>
注意，代码中：var limdex=600; 数字的取值计算为：单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算，使用的单张图片宽度为120px，共使用５张，所以var limdex的数字值为６００。
连续滚动的图片的特效就制作完成了！
- 上一篇: 改变图片链接的边框颜色
- 下一篇: 网页中图片的随机显示
