<! DOCTYPEHtml>
<Html>
<Headlang="EN" >
<Metacharset="UTF-8" >
<title></Title>
<StyleType="Text/css" >
/**********Overall layout**************/
*{Margin0;Padding0;Border0;}
body{">rgba (0,0,0,0.4);}
#content {PositionRelativeWidth970pxHeight550pxMargin20PX Auto;Border2PX Solid#FFF;}
#content:Hover #tags img{Opacity1;}
/* OpacityTransparency:HoverMove the mouse over the element*/
/**********Picture Main display Area**************/
#player {PositionAbsoluteWidth100%;Height100%;Top0;Left0;}
#player img{DisplayInline-block;PositionAbsoluteFloatLeftWidth970pxHeight550pxTop0;}
/**********Picture Display label**************/
#tags {PositionAbsoluteLeft30pxBottom20px;}
#tags img{DisplayInline-block;Width100pxHeight61.8pxFloatLeftMargin-right:10pxTransition1SOpacity0.5;}
#tags img:hover{TransformScale1.1);Cursorpointer;}
</Style>
</Head>
<Body>
<DivId="Content" >
<!--Main display Area-
<DivId="Player" >
<ImgSrc="Http://attach.bbs.miui.com/forum/201401/11/145825zn1sxa8anrg11gt1.jpg" >
<ImgSrc="Http://image.tianjimedia.com/uploadImages/2011/343/WRK98UNL9520.jpg" >
<ImgSrc="Http://dl.bizhi.sogou.com/images/2014/03/17/545637.jpg" >
<ImgSrc="Http://bizhi.cnanzhi.com/upload/bizhi/2014/1202/14175255033658.jpg" >
<ImgSrc="Http://www.longre.cn/uploadfile/2015/0525/20150525051621346.jpg" >
<ImgSrc="Http://img2.niutuku.com/desk/1207/1405/bizhi-1405-62343.jpg" >
<ImgSrc="Http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/12/c0/13805531_1347419023266.jpg" >
</Div>
<!--show Labels--
<div id= "Tags" >
</div>
</div>
<script type= "Text/javascript" src= "Http://www.imooc.com/data/jquery-1.8.2.min.js" >
</script><script type= "Text/javascript" >
$ (function () {
var same=0; Used to avoid touching the same label type is the switch occurs
var interval=5000; Picture switching time
var timer; Timer
/********* Show and hide Pictures ************/
$ ("#player img"). Hide ();
$ ("#player img"). EQ (0). Show ();
$ ("#tags img"). MouseOver (function () {
var tags=$ ("#tags img"). index (this);
if (same!=tags) {
$ ("#player img"). FadeOut ();
$ ("#player img"). EQ (tags). fadeIn (500);
}
Same=tags;
})
/********* automatically play the picture ***********/
function AutoPlay () {
same++;
if (same>=$ ("#tags img"). Length) {
same=0; }
$ ("#player img"). FadeOut ();
$ ("#player img"). EQ (same). FadeIn (500); }
/********** Play picture Toggle **************/
function Play () {
Timer=setinterval (Autoplay,interval);
}
/********** Stop picture Switching **************/
function Stop () {
Clearinterval (timer); }
/***** Play or stop toggling the picture when the mouse hovers or moves out ***/
$ ("#content"). Hover (function () {
Stop (); },
function () {play ();})
Play ();
< Span style= "color: #000080;" >< Span style= "color: #0000ff;" >< Span style= "color: #0000ff;" >
Picture Carousel js jquery