<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js幻灯片组件</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="slide.js"></script>
<link rel="stylesheet" type="text/css" href="slide.css">
<script language="javascript">
<!--
window.onload=function()
{
//数据1
var imgBox1=['1.jpg','2.jpg','3.jpg','4.jpg']; //幻灯片图片
var urlBox1=['http://0','http://1','http://2','3']; //链接
var buttonImgBox1=['s_1.gif','s_2.gif','s_3.gif','s_4.gif']; //按钮数据
var buttonExcImgBox1=['s_1_1.gif','s_2_2.gif','s_3_3.gif','s_4_4.gif']; //按钮切换数据
var imgData1={img:imgBox1,url:urlBox1};
var buttonData1={img:buttonImgBox1,excImg:buttonExcImgBox1};
var options4={
path:'slideImage1/',
buttonImgPath:'button/',
slideClassName:'slideStyleC', //将幻灯片样式名设置为空，就无任何效果了
interVal:4000,
event:'onmouseover',
excStyleValue:2, //切换时无效果
isNeedLink:false, //不需要链接
width:650,
height:350 ,
buttonLeft:20,
buttonTop:320
};
//创建幻灯片 new Slider(Div元素的Id,图片数据,按钮数据,幻灯片配置)
//使用的幻灯片二的数据,新的设置
new Slider('screen4',imgData1,buttonData1,options4); //使用的幻灯片二的数据,新的设置
}
-->
</script>
</head>
<body>
<div align="center">
<font size="60">鼠标滑动切换，可以设置大小，看源代码</font>
<div id="screen4"></div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
</p>
</body>
</html>
基于prototype制作的幻灯片
需积分: 10 142 浏览量
2008-11-28
11:28:04
上传
评论
收藏 161KB RAR 举报
Lantern Slide.rar （20个子文件） 
slideWidget 
prototype.js 28KB slideImage1 
2.jpg 50KB 1.jpg 14KB 3.jpg 32KB 4.jpg 42KB Thumbs.db 14KB slide.js 8KB
demo.html 2KB button 
s_1_1.gif 74B s_5.gif 75B s_3_3.gif 75B Thumbs.db 10KB s_3.gif 75B s_5_5.gif 75B s_2.gif 74B s_4.gif 76B s_2_2.gif 74B s_4_4.gif 76B s_1.gif 74B slide.css 1KB资源评论
