ImageRotator

分享于 

3分钟阅读

Web开发

  繁體

Screenshot - rotator.jpg

介绍

我一直对网页控件感兴趣,但从来没有机会使用。 所以这是我的第一个。 这里控件以幻灯片显示方式显示图像。 页面加载完成后,幻灯片放映就开始了。 图像的顶部有三个按钮。 在这里,幻灯片可以被停止和启动。 也可以使用上一个和上一个按钮手动循环显示图像。

使用控件

只在ASPX页上删除控件。 你需要在项目中添加一个图像文件夹,并用你希望在控件中显示的图像填充该文件夹。 接下来,告诉控件在哪里查找图像。 将虚拟路径写入属性 imageFolder。 下面详细描述了所有附加属性。

就这样,启动应用程序并观察图像旋转器是否能正常工作。

属性

  • imageFolder: 告诉控件从哪里加载图像。 控件将尝试显示这里文件夹中的所有文件。 因此,你应该只添加可以显示在' img src 'tag标记到这里文件夹。
  • timerinterval: 设置幻灯片放映中图像之间的间隔。 值以毫秒为单位。默认值为 1000.
  • imageWidth: 以像素为单位指定图像的宽度。 如果此值为空白,则使用图像的宽度。
  • imageHeight: 以像素为单位指定图像高度。 如果此值为空白,则使用图像的高度。
  • toggleStartText: 开始按钮显示的文本。 默认值为开始。
  • toggleStopText: 停止按钮显示的文本。 默认值为停止。
  • nextText: 为下一个按钮显示的文本。 默认值为下一个。
  • previousText: 上一个按钮要显示的文本。 默认值为前一个。
  • buttonStyle: 应用于所有三个按钮的样式。
  • startImage: 幻灯片放映开始时显示的图像。

结束语

因为这是我创作的第一个网页控件,所以我开始了一。 我开始在HTML和JavaScript中编写所需的功能。 我认为在一天结束之后,web控件将HTML和JavaScript写入浏览器时没有什么别的了。 如果你查看源代码,你将发现标记为原始函数的区域。 在这些区域中是原来的html/javascript。 我考虑了我想要公开的功能,并分别编写了属性。 这里时,我需要做的就是在方法 RenderContents 中编写原始代码,并在适当的时候插入属性的值。 我分离了JavaScript方法和控制元素以分离方法,使代码更加清晰。

希望这段代码帮助你找到解决问题的方法。


图像  
相关文章