Jquery implements banner graph scrolling effect

HTML code:

<div id="Focus"> <ul> <li><p> Zen Practice should be without desire 1</p><a href="http://www.jiyun360.com/topic/201405/index.aspx"target="_blank"title="strong early summer, Thanksgiving feedback! "> "images/shenxiao_qietu.jpg"alt="strong early summer, Thanksgiving feedback! "/></a></li> <li><p> Zen Practice should be without desire 2</p><a href="http://yunshi.jiyun360.com/"target="_blank"title="The 12 zodiac horse Operation Treasure"> "images/shenxiao_qietu2.jpg"alt="The 12 zodiac horse Operation Treasure"/></a></li> </ul> </div>

View Code

jquery Code:

/*Advertising Image Switching*/$ (function () {varSwidth = $ ("#focus"). width ();//gets the width of the focus chart (display area)    varLen = $ ("#focus ul Li"). length;//get the number of focus graphs    varindex =0; varPictimer; //The following code adds a translucent bar after the number buttons and buttons, and the previous page, next page, two buttons    varBTN ="<div class= ' btnbg ' ></div><div class= ' btn ' >";  for(vari =0; i < Len; i++) {btn+="<span></span>"; } btn+="</div><div class= ' prenext pre ' ></div><div class= ' Prenext Next ' ></div>"; $("#focus"). Append (BTN); $("#focus. BTNBG"). CSS ("Opacity",0.5); //Add a mouse slide event to the small button to display the content$("#focus. btn span"). CSS ("Opacity",0.4). MouseEnter (function () {index= $("#focus. btn span"). Index ( This);    Showpics (index); }). EQ (0). Trigger ("MouseEnter"); //previous page, Next button transparency processing$("#focus. Prenext"). CSS ("Opacity",0.2). Hover (function () {$ ( This). Stop (true,false). Animate ({"Opacity":"0.5"}, -); }, Function () {$ ( This). Stop (true,false). Animate ({"Opacity":"0.2"}, -);    }); //Previous Page button$("#focus. Pre"). Click (function () {index-=1; if(Index = =-1) {index = len-1; }    Showpics (index);    }); //Next Page button$("#focus. Next"). Click (function () {index+=1; if(index = = len) {index =0; }    Showpics (index);    }); //This example scrolls left and right, that is, all LI elements are floating on the same row, so it is necessary to calculate the width of the perimeter UL element.$("#focus ul"). CSS ("width", Swidth *(len)); //stop AutoPlay When the mouse is on the focus chart, and start playing automatically when you slide out$("#focus"). Hover (function () {clearinterval (Pictimer); }, Function () {Pictimer=setinterval (function () {showpics (index); Index++; if(index = = len) {index =0; } }, 4000);//This 4000 represents the interval of AutoPlay, in milliseconds}). Trigger ("MouseLeave"); //Display the picture function to display the corresponding content according to the received index valuefunction Showpics (index) {//Normal switching        varNowleft =-index * swidth;//calculates the left value of the UL element based on the index value$("#focus ul"). Stop (true,false). Animate ({" Left": Nowleft}, -);//Adjust the UL element by Animate () to the calculated position//$ ("#focus. BTN span"). Removeclass ("on"). EQ (index), addclass ("on");//switch to the selected effect for the current button$("#focus. btn span"). Stop (true,false). Animate ({"Opacity":"0.4"}, -). EQ (index). Stop (true,false). Animate ({"Opacity":"1"}, -);//switch to the selected effect for the current button    }});

View Code

Css:

/*Advertising Image Switching*/#focus {width:340px;height:256px;overflow:hidden;position:relative;z-index:1;} #focus Ul{height:400px;position:absolute;} #focus ul li{float: Left;width:340px;height:318px;overflow:hidden; position:relative; background: #fff;} #focus ul Li P{position:absolute; top:233px; left:10px; font-size:12px; Color: #ffffff; Z-index:99999} #focus ul Li Div{position:absolute; overflow:hidden;} #focus. Btnbg{position:absolute;width:800px;height:30px;left:0; Bottom:0; background:# the;} #focus. btn{position:absolute;width:780px;height:10px;padding:10px 10px;*padding:10px 10px;right:0; Bottom:0; text-Align:right;} #focus. BTN Span{display:inline-block;_display:inline;_zoom:1; Width:10px;height:10px;_font-size:0; margin-left:5px;cursor:pointer;background: #fff;} #focus. BTN span.on{background: #fff;} #focus. Prenext{width:45px;height:100px;position:absolute;top:90px;background:url (/content/images/sprite.png) no-repeat0 0; cursor:pointer;} #focus. Pre{left:0;} #focus. Next{right:0; background-position:right top;} #focus ul,li{list-Style:none;} #focus Img{border:0;} #focus ul li{float: Left;width:340px;height:256px;overflow:hidden;position:relative;background: #fff;}

View Code

Jquery implements banner graph scrolling effect