jquery for picture switching (automatic switching + manual switching)

Learning js When the original saved a lot of interesting small examples, but did not find some good platform to show these JS effect. Today, I discovered Runjs, a platform for sharing code, and couldn't wait to share it with you.

When browsing the major mall website, or some of the website's homepage, will show some real-time switch pictures related to this website, this article will share a picture with jquery to achieve automatic switch example.

Home Core Code (Default.aspx):

<! DOCTYPE html>
CSS Code (TUPIANQIEHUAN.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;} h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family: "Microsoft YaHei", SimHei; margin-bottom:20px;} /* 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 (http://sandbox.runjs.cn/ Uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} #focus. pre{left:0;} #focus. Next{right:0;background-position:right top;}

JS Code (TUPIANQIEHUAN.JS):
$ (function () {var swidth = $ ("#focus"). width ();//Get the Focus graph's breadth (display area) var len = $ ("#focus ul li"). length;//Get the number of focus graphs var index = 0 ; var pictimer;//the following code adds a number button and a translucent bar after the button, and a previous page, next page two buttons var btn = "<div class= ' btnbg ' ></div><div class= ' btn ' > "for (var i=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 mouse-slide events to the small buttons to display the corresponding contents $ (" #focus. BTN span "). CSS (" Opacity ", 0.4). MouseOver (function () {index = $ (" #focus. BTN span "). index (this); Showpics (index);}). EQ (0). Trigger ("mouseover");//prev page, Next button transparency handles $ ("#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);}); /prev Button $ ("#focus. Pre"). Click (function () {index-= 1;if (Index = =-1) {index = len-1;} Showpics (index);}); /Next button $ ("#focus. Next"). Click (function () {index + = 1;if (index = = len) {index = 0;} Showpics (index);}); /This example is left and right scrolling, that is, all LI elements are floating to the left in the same row, so here it is necessary to calculate the width of the perimeter UL element of $ ("#focus ul"). CSS ("width", swidth * (len));//Stop AutoPlay when the mouse is on the focus chart Start automatically playing $ ("#focus") when you slide out. 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, display the corresponding contents according to the received index value function showpics (index) {//General switching Var Nowleft =-index*swidth; Calculates the left value of the UL element for $ ("#focus ul") based on the index value. Stop (True,false). Animate ({"Left": nowleft},300); The UL element is scrolled through animate () to the computed position$ ("#focus. BTN span"). Stop (True,false). Animate ({"opacity": "0.4"},300). EQ (Index ). Stop (True,false). Animate ({"Opacity": "1"},300);//Toggle the current button to the selected effect});

specific effects can be see  Effect Demo
Here's an appetizer for everyone, and a quick summary of how to post your own applet on RUNJS and some tips on using runjs.

jquery for picture switching (automatic switching + manual switching)