The entire page is as follows:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Test. aspx. cs" Inherits = "Test" %>
<! 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 runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script src = "_ Template/js/blockSlide. js" type = "text/javascript"> </script>
<Style type = "text/css">
Div # imgADPlayer
{
Margin: auto;
Margin-bottom: 4px;
Width: 960px;
Height: 120px;
Background: url (../images/photo_01.jpg) left top no-repeat;
Padding: 0px;
Border: none;
Clear: both;
Position: relative;
}
Div # imgADPlayer. smask
{
Position: absolute;
Left: 0px;
Top: 0px;
}
</Style>
</Head>
<Body>
<! -- Start to scroll the image -->
<Div id = "imgADPlayer">
<Div id = "AdTop">
<Div id = "myjQueryContent">
<Div>
<A href = "javascript: void (0)">
</a> </div>
<Div class = "smask">
<A href = "javascript: void (0)">
</a> </div>
<Div class = "smask">
<A href = "javascript: void (0)">
</a>
</Div>
<Div class = "smask">
<A href = "javascript: void (0)">
</a> </div>
</Div>
<Div id = "flow">
</Div>
</Div>
<Script type = "text/javascript" language = "javascript">
$ (Document). ready (function (){
$ ("# AdTop"). blockSlide ({
Speed: "normal ",
Num: 4,
Timer: 3000,
FlowSpeed: 300
});
});
</Script>
</Div>
<! -- Rolling image ends -->
</Body>
</Html>
Note:
Speed: Image carousel speed
Num: number of images
Timer: the time interval of automatic carousel and the timer;
FlowSpeed: the speed at which the slider moves
The source code of the blockSlide plug-in is as follows:
Copy codeThe Code is as follows:
/**
* @ Author huajianhuakai */
(Function ($)
{
$. Fn. blockSlide = function (settings)
{
Settings = jQuery. extend ({
Speed: "normal ",
Num: 4,
Timer: 1000,
FlowSpeed: 300
}, Settings );
Return this. each (function ()
{
$. Fn. blockSlide. scllor ($ (this), settings );
});
};
$. Fn. blockSlide. scllor = function ($ this, settings)
{
Var index = 0;
Var imgScllor = $ ("div: eq (0)> div", $ this );
Var timerID;
// Automatic playback
Var MyTime = setInterval (function ()
{
ShowjQueryFlash (index );
Index ++;
If (index = settings. num)
Index = 0;
}, Settings. timer );
Var ShowjQueryFlash = function (I)
{
$ (ImgScllor ). eq (I ). animate ({opacity: 1}, settings.speed).css ({"z-index": "100 "}). siblings (). animate ({opacity: 0}, settings.speed).css ({"z-index": "0 "});
}
}
}) (JQuery );
Hope to be useful to cainiao like me