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

Today, I would like to share with you the relevant knowledge of how to achieve picture switching animation effects with jQuery. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Effect picture:

Go directly to the code:

/ / 2017-2-27 / / $(function () {var num = 0; var divStr ='# imageShowSmallAnchor'; / / Mobile div var s = 300; $('imgNum') .click (function () {var _ this = $(this); var status = _ this.attr ('data-status'); var total_num = _ this.parent (). Find (' ul li'). Length; var numSPic = 4 / / the maximum number of small images displayed is var src; if (status = = 'left') {if (num = total_num-1) {num = 0;} else {num++;}} / / 4 display four small images at a time $("# div") .stop (false, true) / / Let the current animation go directly to the final state and continue to the next animation / / in the first case, when the number of small images is less than 5, move directly to the right. If (total_num = total_num-numSPic; xmuri -) {_ this.parent (). Find ('ul li') .eq (x). Show () }} else {/ picture right move / if (num > = numSPic) {_ this.parent (). Find ('ul li') .eq (num-numSPic). Hide () } else {/ / when the special case moves to the right, when switching from the last picture to the first picture, / / to determine whether it is the first picture, and if not, then to move to the left again, there is no need to refresh the display status of the mini image if (num = = 0) {for (var x = 0; x)

< numSPic; x ++) { _this.parent().find('ul li').eq(x).show(); } } } } // 快速点击切换时吗，动画出现滞后和反复问题， // 让当前动画直接到达末状态 ，继续下一个动画 $('#div').stop(false, ture); $('#div').stop().animate(); 集合使用效果更佳。 $(divStr).stop(false, true); //////// // 样式左移 // //////// if (status == 'left') { // 39 定位divStr 的left距离 父级元素的像素距离 // 等样式移动到最右边时，样式位置固定 // $(divStr).position().left 获取定位元素 left值。 if ($(divStr).position().left = 357) { $(divStr).stop().animate({left:"357px"}); // 当从最后一张切换到第一张时，样式应在最左边。 if (num==0) { $(divStr).stop().animate({left:"39px"},s); } } else{ $(divStr).stop().animate({left:"+=106px"},s); } } } src = _this.parent().find('ul li').eq(num).find('img').attr('src'); _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); }); // 点击小图切换 大图 和小图上的样式。 $('.imgSW-bt li').click(function(){ var _this = $(this); var src; num = _this.index(); // parseInt(10/3); 整除 // 获取点击的位置，来计算 样式的位置。 var X = parseInt(_this.position().left/106); $(divStr).stop().animate({left:X*106+39+"px"},s); src = _this.find('img').attr('src'); _this.parents('.xq-imgSW').find('.imgSW-top li img').attr('src',src); }); }); HTML 界面代码：

Huxing 1

Huxing 2

Huxing 3

Huxing 4

Huxing 5

Huxing 6

Huxing 7

Huxing 8

It's located.

In addition:

Fast click will cause animation delay, affect the experience, and deal with animation delay jQuery stop () syntax:

$("# div"). Stop (); / / stop the current animation and continue with the next animation $("# div") .stop (true); / / clear all animations of the element $("# div") .stop (false, true); / / make the current animation go directly to the final state, continue to the next animation $("# div") .stop (true, true); / / clear all animations of the element to allow the current animation to reach the final state directly

It is useful and annotated in jq.

/ / Let the current animation go directly to the final state and continue to the next animation $('# div') .stop (false, ture); $('# div'). Stop (). Animate (); the collection works better.

These are all the contents of the article "how to achieve picture switching animation effects in jQuery". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.