[Image carousel special effect plugin] --- effect implementation

After a busy period of time, I can finally calm down and write this blog post. I will not talk much about it. Let's just start.

According to the previous study on jquery plug-ins, the first step is to build a suitable framework, set the attributes to be used in the plug-ins, and set up interfaces for other users:

1 (function ($) {2 // various default attribute parameters 3 var defaults = {4 width: 400, 5 Height: 200, 6 ction: 'left', 7 IMGs: [{8 SRC: 'Your JPG ', 9 link: 'http: // www.cnblogs.com/bikeway'10}, {11 SRC: 'p1.jpg', 12 link: 'http: // www.cnblogs.com/bikeway'13 }, {14 SRC: 'p2.jpg ', 15 link: 'http: // www.cnblogs.com/bikeway'16}] 17} 18 19 // provides the unique interface slideimg20. FN. slideimg = function (options) {21 Options = $. extend ({}, defaults, options); 22 return this. each (function () {23 Init ($ (this), options); 24}) 25 }; 26}) (jquery );

Here, I default the width, height, scroll direction and three pictures displayed by the plug-in (the picture is linked to my blog homepage by default)

Return this. Each (function (){......}),

But you can also write it like this:

$. FN. slideimg = function (options ){

This. Each (funciton ){

// Code ........

}

}

Here I like and recommend the first method, because jquery has a great feature that it can perform method cascade. We should always return an element in the method. In addition, each method block can be well separated, and the code looks comfortable.

Then initialize the plug-in.

 1 function init(obj,options){ 2         var imgs = "<div class=‘imgBox‘>", 3             tips = "<div class=‘tipBox‘>", 4             len = options.imgs.length; 5         for(var i = 0; i < len; i++){ 6             if(options.imgs[i].link){ 7                 imgs += "<a href=‘"+options.imgs[i].link+"‘>"; 8                 imgs += "</a>"14         }15         imgs += "</div>";16         tips += "</div>";17         18         $(obj).append(imgs).append(tips);19 　　　　 $(‘.tipBox a‘).eq(0).addClass(‘current‘);20          $(obj).css({21              ‘width‘:options.width,22              ‘height‘:options.height23         });24 25          $(‘.imgBox a‘).css({26              ‘width‘:options.width,27              ‘height‘:options.height28          });29 30          $(‘.imgBox img‘).css({31              ‘width‘:options.width,32              ‘height‘:options.height33          });34 35         $(‘.tipBox‘).css({36             ‘left‘:(options.width - 11 * len - 10) / 237         })38 39         if(options.direction == ‘top‘ || options.direction == ‘bottom‘){40             $(‘.imgBox a‘).css({41                 ‘display‘:‘block‘42             })43             $(‘.imgBox‘).css({44                 ‘width‘:‘100%‘,45                  ‘height‘:options.height * len46             })47         }else{48             $(‘.imgBox‘).css({49                 ‘width‘:options.width * len,50                 ‘height‘:‘100%‘51             })52         }53 54 55         var dir = options.direction;56         switch(dir){57             case ‘top‘:{58                 setInterval(function(){autoSlideTop(options)},3000);59                 break;60             }61             case ‘right‘:{62                 setInterval(function(){autoSlideRight(options)},3000);63                 break;64             }65             case ‘bottom‘:{66                 setInterval(function(){autoSlideBottom(options)},3000);67                 break;68             }69             case ‘left‘:{70                 setInterval(function(){autoSlideLeft(options)},3000);71                 break;    72             }73         }74     }

In this Code, I omitted a lot of code that sets the style for the rolling tag, and only set the style that does not affect the effect of the plug-in (and I like to set the style in jquery mode, instead of writing it in the tag, I think this modification will be more convenient ). In demo, I write a slideimg.css file as the default style of this plug-in.

The final part is the key effect implementation part. The code I posted here only contains the left-scrolling part.

 1         var index = 0; 2         function autoSlideLeft(options){  3         if($(‘.imgBox‘).position().left == -options.width * (options.imgs.length - 1)){ 4             index = 0; 5             $(‘.imgBox‘).animate({left: ‘0‘},1000); 6             $(‘.tipBox a‘).each(function(i){ 7                 if (index == i) { 8                     $(this).addClass(‘current‘); 
 9                 }else{10                     $(this).removeClass(‘current‘);
11                 }12             })13         }else{14             index++;15             $(‘.imgBox‘).animate({left: "-="+options.width,},1000);16             $(‘.tipBox a‘).each(function(i){17                 if (index == i) {18                     $(this).addClass(‘current‘);
19                 }else{20                     $(this).removeClass(‘current‘);
21                 }22             })23         }24     }

By now, the rolling plug-in has been initially completed to implement the three functions set in the previous article. In the next article, I hope to optimize the code and add the touch event.

: Rolling:

Finally, the "image carousel special effect plug-in" is provided]

Demo

[Image carousel special effect plugin] --- effect implementation