Switching between multi-screen images of the Year of the Snake (you can add image links and edit titles)

Source: Internet
Author: User

A friend asked me to make a multi-screen image switching effect to serve as a website advertisement. When I first heard this requirement, I thought it would be easy to copy it. However, my friends have further requirements to manage and add images, links, and titles after website management. You can also edit the information. The front-end does not have to modify the front-end code every time it is updated.

Even if you have such requirements, just do it with Insus. NET. First, let's take a look at the effect (this year is the year of the snake, and Windows 8 Themes also has a few pictures of the snake, so let's take it as an example .)

 
Create a table in the database to store related information, piece names, links, and titles:
Copy codeThe Code is as follows:
[Dbo]. [SwitchFocusNews]
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- ===================================================== ======
-- Author: Insus. NET
-- Create date: 2013-01-12
-- Description: creates an image switching information table.
-- ===================================================== ======
Create table [dbo]. [SwitchFocusNews]
(
[Nbr] tinyint identity (1, 1) primary key not null,
[ImageName] NVARCHAR (128) not null,
[Url] NVARCHAR (200) not null,
[Title] NVARCHAR (200) NOT NULL
)
GO

Create a stored procedure and obtain all records:
Copy codeThe Code is as follows:
[Dbo]. [usp_SwitchFocusNews_GetAll]
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- ===================================================== ======
-- Author: Insus. NET
-- Create date: 2013-01-12
-- Description: obtains all records.
-- ===================================================== ======
Create procedure [dbo]. [usp_SwitchFocusNews_GetAll]
AS
SELECT [Nbr], [ImageName], [Url], [Title] FROM [dbo]. [SwitchFocusNews]
GO

Insus. NET is omitted here for uploading and editing images in the website background.

Next, create a category. This category only obtains information about the database table. The other methods include adding, editing, and deleting.
Copy codeThe Code is as follows:
SwitchFocusNews
Imports System. Data
Imports Microsoft. VisualBasic
Namespace Insus. NET
Public Class SwitchFocusNews
Dim objbusinimap4 As New businimap4 ()
Public Function GetAll () As DataTable
Return objbusinimap4. GetDataToDataSet ("usp_SwitchFocusNews_GetAll"). Tables (0)
End Function
End Class
End Namespace

For future maintenance convenience and least functional development philosophy, Insus. NET writes it as a user control ASCX. The following HTML code focuses on placing an asp: Literal control between <script>. Another point is that css and js are also referenced here.
Copy codeThe Code is as follows:
<% @ Control Language = "VB" AutoEventWireup = "false" CodeFile = "FlashAnimation. ascx. vb" Inherits = "AscxControls_FlashAnimation" %>
<Link href = '<% = ResolveUrl ("~ /FlashAnimation/css/lrtk.css ") %> 'rel =" stylesheet "/>
<Script src = '<% = ResolveUrl ("~ /FlashAnimation/js/pptBox. js ") %> '> </script>
<Div id = "insus">
<Script>
<Asp: Literal ID = "LiteralSwitchImage" runat = "server"> </asp: Literal>
</Script>
</Div>

User Control cs code:
Copy codeThe Code is as follows:
Imports System. Data
Imports Insus. NET
Partial Class AscxControls_FlashAnimation
Inherits System. Web. UI. UserControl
'Instantiation category
Dim objSwitchFocusNews As New SwitchFocusNews ()
Protected Sub Page_Load (sender As Object, e As EventArgs) Handles Me. Load
Dim objDataTable As DataTable = objSwitchFocusNews. GetAll ()
'Check whether there are records in the database
If objDataTable. Rows. Count> 0 Then
Dim width As Integer = 500 'width
Dim height As Integer = 300 'height
Dim autoPlayer As Integer = 3' automatic playback Interval
Dim si As New StringBuilder ()
Si. AppendFormat ("var box = new PPTBox ();")
Si. AppendFormat ("box. width = {0};", width)
Si. AppendFormat ("box. height = {0};", height)
Si. AppendFormat ("box. autoplayer = {0};", autoPlayer)
'Cycle the data table and show each record in the following syntax. The correct image path is the path stored during background upload or editing. Of course, you can also display images stored in data.
For Each dr As DataRow In objDataTable. Rows
Si. appendFormat ("box. add ({"" url "": "" {0} "", "" href "": "" {1} "", "" title "": "" {2} ""}); ", ResolveUrl ("~ /FlashAnimation/images/"& dr (" ImageName "). toString () & ""), dr ("Url "). toString (), dr ("Title "). toString ())
Next
Si. Append ("box. show ();")
Me. LiteralSwitchImage. Text = si. ToString ()
End If
End Sub
End Class

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.