:
Implementation Code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> hotmarquee </title>
<Style type = "text/css">
*
{
Margin: 0;
Padding: 0;
}
Body
{
Font: 12px;
Padding-top: 50px;
Padding-right: 200px;
Padding-bottom: 100px;
Padding-left: 200px;
}
Ul
{
List-style: none;
}
Img
{
Padding: 2px;
Border: 1px solid # eee;
}
A
{
Outline: none;
}
# Imgs
{
Width: pixel PX;
Margin-right: auto;
Margin-left: auto;
}
. Top,. btm
{
Background: url (../images/sprite.gif) no-repeat;
Overflow: hidden;
}
. Top
{
Background-position: 0 0;
Height: 5px;
}
. Btm
{
Height: 7px;
}
. Mid
{
Width: 400px;
Padding: 5px 7px 0;
Border: 1px solid #999;
}
. Mid ul
{
Width: 400px;
Height: 600px;
Background: # fff;
Position: relative;
Overflow: hidden;
}
. Mid ul li
{
Width: 400px;
Height: 600px;
Position: absolute;
Left: 490px;
Top: 0;
}
. Mid ul li. first
{
Left: 0;
}
# Img_list
{
Width: 486px;
Height: 20px;
Padding-top: 5px;
Overflow: hidden;
Height: 1%;
}
# Img_list
{
Display: block;
Width: 14px;
Height: 14px;
Text-indent:-9999px;
Float: left;
Margin-right: 5px;
Background: url (../images/sprite.gif) no-repeat 0-13px;
}
# Img_list a: hover, # img_list a. active
{
Background-position:-14px-13px;
}
</Style>
<Script src = "../Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var curr = 0, next = 0, count = 0;
$ (Document). ready (function (){
// Record the number of images
Count = $ ('# img_list A'). size ();
T = setInterval ('imgplay () ', 3000 );
// Move the mouse over an image or navigation bar to stop playing. After removing the mouse, resume playing.
$ ('# Imgs li, # img_list A'). hover (function (){
ClearInterval (t );
}, Function (){
T = setInterval ('imgplay () ', 3000 );
});
// Click the navigation bar to play the corresponding image
$ ('# Img_list A'). click (function (){
// The index () function returns the subscript of the current navigation.
Var index = $ ('# img_list A'). index (this );
If (curr! = Index ){
Play (index );
Curr = index;
};
Return false;
});
});
// Function for playing an image
Var imgPlay = function (){
Next = curr + 1;
// If the current image is played to the last one, set the next image to be played as the subscript of the first image
If (curr = count-1) next = 0;
Play (next );
Curr ++;
// After the subscript of the current image is added with 1, if the value is greater than the subscript of the last image, set the subscript of the next actually played image to the subscript of the first image, and next is always 1 larger than curr.
If (curr> count-1) {curr = 0; next = curr + 1 ;}
};
// Function for controlling the playback effect
Var play = function (next ){
// Slide the current image to the left-Px, and then return to the right 490px
// Slide the next image to 0 PX. After completion, the focus of the navigation is switched to the next point.
$ ('# Imgs li'%.eq(curr%.css ({'opacity': '0. 5 '}). animate ({'left': '-500px', 'opacity ': '1'}, 'low', function (){
Optional (this).css ({'left': '490px '});
}). End ()
. Eq (next). animate ({'left': '0px ', 'opacity': '1'}, 'low', function (){
$ ('# Img_list A'). siblings ('A'). removeClass ('active'). end (). eq (next). addClass ('active ');
});
};
</Script>
</Head>
<Body>
<Div id = "imgs">
<Div class = "mid">
<Ul>
<Li class = "first"> <a href = "http://meinv.vs2010.com/topic/7/201107/show-id2231.html"
Target = "_ blank">
Alt = "1"/> </a> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/7/201106/show-id2130.html" target = "_ blank">
Alt = "2"/> </a> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/7/201106/show-id2184.html" target = "_ blank">
Alt = "3"/> </a> </li>
<Li> <a href = "http://meinv.vs2010.com/topic/7/201106/show-id2163.html" target = "_ blank">
Alt = "4"/> </a> </li>
</Ul>
<Div id = "img_list">
<A href = "#1" class = "active"> 1 </a> <a href = "#2"> 2 </a> <a href = "#3 "> 3 </a> <a href =" #4 ">
4 </a>
</Div>
</Div>
</Div>
</Body>
</Html>