ImageRotator

• 下载源代码 - 170 KB

引言

我一直对Web控件很感兴趣，但从未有机会使用过。所以这是我的第一个控件。此控件以幻灯片方式显示图片。页面加载完成后，幻灯片就开始播放。图片上方有三个按钮。在这里，可以停止和启动幻灯片。也可以使用“上一个”和“下一个”按钮手动循环浏览图片。

使用控件

只需将控件拖放到 ASPX 页面上即可。您需要向您的项目中添加一个图片文件夹，并使用您想要在控件中显示的图片填充该文件夹。接下来，告诉控件在哪里查找图片。将虚拟路径写入属性 imageFolder。所有其他属性将在下面详细描述。

就这样。启动应用程序，观看图片旋转器工作。

属性

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

结论

由于这是我编写的第一个Web控件，我从零开始。我首先用HTML和JavaScript编写了我想要的功能。我发现在一天结束时，Web控件除了向浏览器编写HTML和JavaScript之外什么也没做。如果您查看源代码，您将找到标记为“Original Function”的区域。这些区域是我编写的原始HTML/JavaScript。我考虑了我想公开的功能，并分别编写了属性。在这一点上，我所要做的就是在方法 RenderContents 中编写原始代码，并在适当的位置插入属性的值。我将JavaScript方法和控件元素拆分到单独的方法中，以使代码更易于阅读。

希望此代码能帮助您找到问题的解决方案。