A simple picture switching effect implemented with Html+css+jquery

This article mainly introduces a simple image switching effect implemented with HTML+CSS+JS (jQuery), which requires a friend to refer to.

Remember to introduce a jquery library file, which can be online or local, note the path.

。


The image switching effect is simple and very compatible.

The HTML page is as follows

Copy CodeThe code is as follows:

<Divclass= "wrapper"> <DivID= "Focus"> <ul> <Li><ahref= "http://www.lanrentuku.com/"Target= "_blank"><imgsrc= "Img/01.jpg"alt= "QQ Mall focus Map effect Download" /></a></Li> <Li><ahref= "http://www.lanrentuku.com/"Target= "_blank"><imgsrc= "Img/02.jpg"alt= "QQ Mall Focus Map Effect Tutorial" /></a></Li> <Li><ahref= "http://www.lanrentuku.com/"Target= "_blank"><imgsrc= "Img/03.jpg"alt= "jquery Mall Focus Chart Effect" /></a></Li> <Li><ahref= "http://www.lanrentuku.com/"Target= "_blank"><imgsrc= "Img/04.jpg"alt= "jquery Mall Focus Map Code" /></a></Li> <Li><ahref= "http://www.lanrentuku.com/"Target= "_blank"><imgsrc= "Img/05.jpg"alt= "jquery Mall focus Map Source" /></a></Li> </ul> </Div> </Div><!--Wrapper End - </Body> 

CSS Styles

Copy CodeThe code is as follows:

<style type= "Text/css" > *{margin:0;padding:0;}Body{font-size:12px;Color:#222;font-family:Verdana,arial,helvetica,sans-serif;background:#f0f0f0;}. Clearfix:after{content: ".";Display:Block;Height:0;Clear:both;Visibility:Hidden;}. Clearfix{Zoom:1;}Ul,li{List-style:None;}img{Border:0;}. Wrapper{width:800px;margin:0 Auto;Padding-bottom:50px;}/*Qqshop Focus*/#focus{width:800px;Height:280px;Overflow:Hidden;position:relative;}#focus ul{Height:380px;position:Absolute;}#focus ul Li{float: Left;width:800px;Height:280px;Overflow:Hidden;position:relative;background:#000;}#focus ul Li Div{position:Absolute;Overflow:Hidden;}#focus. BTNBG{position:Absolute;width:800px;Height:20px; Left:0;Bottom:0;background:#000;}#focus. BTN{position:Absolute;width:780px;Height:10px;padding:5px 10px; Right:0;Bottom:0;text-align: Right;}#focus. btn span{Display:Inline-block;_display:inline;_zoom:1;width:25px;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 (img/sprite.png) no-repeat 0 0;cursor:Pointer;}#focus. Pre{ Left:0;}#focus. Next{ Right:0;background-position:Right top;}</style>

JS Script

Copy CodeThe code is as follows:

$(function() { varSwidth = $ ("#focus"). width ();//gets the width of the focus chart (display area)varLen = $ ("#focus ul li"). length;//get the number of focus graphsvarindex = 0; varPictimer;//The following code adds a translucent bar after the number buttons and buttons, and the previous page, next page, two buttonsvarBTN = "<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"},300); },function() { $( This). Stop (true,false). Animate ({"opacity": "0.2"},300); }); //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 valuefunctionShowpics (index) {//Normal switchingvarNowleft =-index*swidth;//calculates the left value of the UL element based on the index value$ ("#focus ul"). Stop (true,false). Animate ({"Left": nowleft},300);//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"},300). EQ (index). Stop (true,false). Animate ({"Opacity": "1"},300);//switch to the selected effect for the current button} }); 

Use the left and right to switch pictures

A simple picture switching effect implemented with Html+css+jquery