Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use jQuery to achieve the effect of round dot picture rotation". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use jQuery to achieve the effect of round dot picture rotation" can help you solve your doubts.

The code is implemented as follows:

/ / introduce jquery (css code is not affixed) $(function () {var rcd=0; / / global variable / / sliding function function slide () {rcd++) representing picture and li tag number If (rcd==4) {/ / when the last one slips to the right, the picture is set to the position of the first, and the image to be slipped is set to the second (rcd=1) $('# sld'). Css ({'left':'0'}); rcd=1;}; var dis = rcd* (- 1210) +' px' / / 1210 here is the width of each picture. The relationship between rcd and dis is the relationship between number and div left value $('# sld'). Stop (). Animate ({'left':dis}, 1000) / / set left if (rcd==3) {/ / when switching to the last picture (a total of 4 pictures) Change the label style at the lower left to the same $('# fix ul li'). Eq (0). Css ({'opacity':' 0.6'}). Siblings ('li'). Css ({' opacity': '0.2'})} else {$('# fix ul li') .eq (rcd). Css ({'opacity':' 0.6') }). Siblings ('li'). Css ({' opacity': '0.2'}) / / is not the last one, so set the timer normally. Start var timer = setInterval (slide,2000) Var st; / / declare countdown function variable name / bind li mouse click event $('# fix ul li') .click (function () {clearInterval (timer); / / clear timer (same line) clearTimeout (st); var rcd = $(this). Index () / / get the number of the clicked li var dis = rcd* (- 1210) + 'px' / / get the left value of the div corresponding to the number $('# sld'). Stop (). Animate ({'left':dis}, 500) / / start the movement $(' # fix ul li') .eq (rcd). Css ({'opacity':' 0.6}). Siblings ('li'). Css ({' opacity': '0.2}) / / set the current li style Other li changes to the initial value st = setTimeout (function () {/ / set timer). If there is no mouse click within 3 seconds, reset the rotation timer timer = setInterval (slide,2000) }, 3000)}); / / left icon click event $('# fix .lt') .click (function () {clearInterval (timer); clearTimeout (st); rcd-- / / if the previous number-1 if (rcd==-1) {/ / if the rcd minus value is-1, set the left of div to the value shown in the last picture, and set rcd to the number $('# sld'). Css ({'left':'-3630px'}); rcd=2;}; var dis = rcd* (- 1210) +' px' $('# sld'). Stop (). Animate ({'left':dis}) 1000) / / Motion if (rcd==3) {/ / same as before $('# fix ul li'). Eq (0). Css ({'opacity':' 0.6'}). Siblings ('li'). Css ({' opacity': '0.2'})} else {$('# fix ul li') .eq (rcd). Css ({' Opacity': '0.6'}). Siblings ('li'). Css ({' opacity': '0.2'})} st = setTimeout (function () {timer = setInterval (slide) 2000) }, 3000)}) / / right icon click event $('# fix .rt') .click (function () {clearInterval (timer); clearTimeout (st); slide (); / / right icon click once consistent with the sliding function st = setTimeout (function () {timer = setInterval (slide,2000)) }, 3000)}) / / add mouse movement event $('# fix') .Mouseenter (function () {$('# fix a') .css ({'display':'block'}) to # fix div) / / add mouse removal event $('# fix') .mouseleave (function () {$('# fix a') .mouseleave ({'display':'none'}); / / hide} from left to right icon when mouse moves out)}) / / add mouse removal event $(' # fix') .mouseleave (mouse () {$('# mouse a'). Css ({'mouse})) to # mouse

IPhone6 Mate9 vivo X9

/ / prevent the default jump of the browser

After reading this, the article "how to use jQuery to achieve the effect of round dot picture rotation" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.