jQuery插件实例三：图片滚动[切换]效果一

图片切换效果在很多网站上都能看到，是一种常见的广告/活动宣传方式，通常位于网页上端。这个插件是众多图片切换效果的形式中的一种，数据源可在前端配置，也可从后台通JSON格式传输数据，当然，数据格式是固定的。

这个插件的要点在于：1、定时执行的函数不是在插件闭包里；2、在布局上如何布局；3、什么时候执行动画，什么时候暂停动画，以及jQuery的动画操作。

在这里用到的动画函数有：

动画

1、stop() 方法停止当前正在运行的动画。
   语法
   $(selector).stop(stopAll,goToEnd)
   参数   描述
   stopAll   可选。规定是否停止被选元素的所有加入队列的动画。
   goToEnd
   可选。规定是否允许完成当前的动画。
   该参数只能在设置了 stopAll 参数时使用。

2、fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
   语法
   $(selector).fadeIn(speed,callback)
   参数   描述
   speed
   可选。规定元素从隐藏到可见的速度。默认为 "normal"。
   可能的值：
   毫秒（比如 1500）
   "slow"
   "normal"
   "fast"
   在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。
   callback
   可选。fadeIn 函数执行完之后，要执行的函数。
   如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
   除非设置了 speed 参数，否则不能设置该参数。

3、siblings() 获得匹配集合中每个元素的同胞(同辈元素下同)，通过选择器进行筛选是可选的。
   语法
   .siblings(selector)
   参数   描述
   selector   字符串值，包含用于匹配元素的选择器表达式。

4、fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。
   语法
   $(selector).fadeOut(speed,callback)
   参数   描述
   speed
   可选。规定元素从可见到隐藏的速度。默认为 "normal"。
   可能的值：
   毫秒（比如 1500）
   "slow"
   "normal"
   "fast"
   在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。
   callback
   可选。fadeOut 函数执行完之后，要执行的函数。
   如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
   除非设置了 speed 参数，否则不能设置该参数。

效果图预览

jQuery插件实例三：图片滚动[切换]效果一

插件JS

  1 ;
  2 function nhsdShowImgA($imgA, $pTitleDiv, index) {
  3     var newhref = $pTitleDiv.find('a').eq(index).attr('href');
  4     $imgA.attr('href', newhref).find('img').eq(index).stop(true, true).fadeIn().siblings().fadeOut();
  5     $pTitleDiv.find('a').removeClass('scrolla_pdiv_current').css('opacity', '0.7').eq(index).css('opacity', '1').addClass('scrolla_pdiv_current');
  6 }
  7 (function ($, window, document, undefined) {
  8     var defaults = {
  9         'imgsConfigData': [
 10             {
 11                 'imgsrc': '/Images/ImgScrollA/1.jpg',
 12                 'alt': '笑傲江湖',
 13                 'href': 'http://www.cnblogs.com/nhsd/',
 14                 'title': '笑傲江湖'
 15             }, {
 16                 'imgsrc': '/Images/ImgScrollA/2.jpg',
 17                 'alt': '天龙八部',
 18                 'href': 'http://www.cnblogs.com/nhsd/',
 19                 'title': '天龙八部'
 20             }, {
 21                 'imgsrc': '/Images/ImgScrollA/3.jpg',
 22                 'alt': '神雕侠女',
 23                 'href': 'http://www.cnblogs.com/nhsd/',
 24                 'title': '神雕侠女'
 25             }, {
 26                 'imgsrc': '/Images/ImgScrollA/4.jpg',
 27                 'alt': '倚天屠龙记',
 28                 'href': 'http://www.cnblogs.com/nhsd/',
 29                 'title': '倚天屠龙记'
 30             }, {
 31                 'imgsrc': '/Images/ImgScrollA/5.jpg',
 32                 'alt': '三国演义',
 33                 'href': 'http://www.cnblogs.com/nhsd/',
 34                 'title': '三国演义'
 35             }],
 36         'isAjaxData': false,
 37         'getDataURL': ''
 38     };
 39 
 40     $.fn.nhsdImgScrollA = function (options) {
 41         var $parentDiv = $(this);
 42         var $parentDivId = $parentDiv.attr('id');
 43         var $pDiv = '';
 44         var $imgA = '';
 45         var $pTitleDiv = '';
 46         $parentDiv.html("");
 47         var $opts = $.extend({}, defaults, options);
 48         if ($opts.isAjaxData != false) {
 49             var ajaxdata = { 'type': '', 'id': '', 'sort': '' };//预留字段
 50             $.ajax({
 51                 url: $opts.getDataURL,
 52                 cache: false,
 53                 data: { "configData": ajaxdata },
 54                 type: "get", //提交方式  
 55                 beforeSend: function () {
 56                     $parentDiv.html('精彩稍候开启...');
 57                 },
 58                 success: function (data) {
 59                     $parentDiv.html();
 60                     if (data != null && data.length > 0) {
 61                         generateDom($.parseJSON(data));
 62                     } else {
 63                         console.log('加载数据格式异常...');
 64                     }
 65                 },
 66                 error: function () {
 67                     //出错异常  
 68                     console.log('加载数据异常...');
 69                 }
 70             });
 71         } else {
 72             generateDom($opts.imgsConfigData);
 73         }
 74 
 75         function generateDom(data) {
 76             $pDiv = $('<div></div>', { 'class': 'scrolla_pdiv' }).appendTo($('#' + $parentDivId));
 77             $imgA = $('<a></a>', { 'href': 'javascropt:void(0);', 'class': 'scrolla_pdiv_a' }).appendTo($pDiv);
 78             $pTitleDiv = $('<div></div>', { 'class': 'scrolla_pdiv_div' }).appendTo($pDiv);
 79             for (var i = 0; i < data.length; i++) {
 80                 var d = data[i];
 81                 $('<img/>', { 'src': d.imgsrc, 'alt': d.alt, 'style': 'display:block;' }).appendTo($imgA);
 82                 var $atitle = $('<a></a>', { 'href': d.href, 'style': 'opacity:0.7' }).appendTo($pTitleDiv);
 83                 $('<span></span>').html(d.title).appendTo($atitle);
 84             }
 85             initEvent();
 86         }
 87 
 88         function initEvent() {
 89             var index = 0;
 90             var len = $imgA.find('img').length;
 91             var scTime = null;
 92             $pTitleDiv.find('a').mouseover(function () {
 93                 index = $pTitleDiv.find('a').index(this);
 94                 nhsdShowImgA($imgA, $pTitleDiv, index);
 95             }).eq(0).mouseover();
 96             $pDiv.hover(function () {
 97                 if (scTime) {
 98                     clearInterval(scTime);
 99                 }
100             }, function () {
101                 scTime = setInterval(function () {
102                     nhsdShowImgA($imgA, $pTitleDiv, index);
103                     index++;
104                     if (index == len) {
105                         index = 0;
106                     }
107                 }, 3000);
108             }).trigger('mouseleave');
109         }
110         return this;
111     }
112 })(jQuery, window, document);

View Code