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 参数，否则不能设置该参数。

效果图预览

插件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

CSS样式

 1 #dv {
 2     margin: 0 auto;
 3     width: 966px;
 4     border: 1px solid;
 5 }
 6 
 7 .scrolla_pdiv {
 8     width: 966px;
 9     height: 300px;
10     position: absolute;
11 }
12 
13     .scrolla_pdiv a img {
14         width: 966px;
15         height: 300px;
16         position: absolute;
17         overflow: hidden;
18     }
19 
20     .scrolla_pdiv div {
21         /*position: absolute;
22         text-align: center;
23         width: 966px;*/
24     }
25 
26         .scrolla_pdiv div a {
27             width: 182px;
28             height: 30px;
29             overflow: hidden;
30             background-color: #444444;
31             margin-right: 1px;
32             display: inline-block;
33             text-align: center;
34             padding: 0 5px;
35             line-height: 2em;
36             text-decoration: none;
37             color: #ffffff;
38         }
39 
40             .scrolla_pdiv div a span {
41                 font-size: 12px;
42                 display: block;
43             }
44 
45 .scrolla_pdiv_div {
46     position: absolute;
47     text-align: center;
48     width: 966px;
49     height: 30px;
50     bottom: 0;
51 }
52 
53 .scrolla_pdiv div a:hover {
54     text-decoration: underline;
55 }
56 
57 .scrolla_pdiv div .scrolla_pdiv_current {
58     background: url(/Images/Extend/adindex.gif) no-repeat center 27px #37A7D7;
59 }
60 
61 .scrolla_pdiv_a {
62 }

View Code

HTML页面

 1 <html>
 2 <head>
 3     <meta name="viewport" content="width=device-width" />
 4     <title>Index</title>
 5     <script src="/Scripts/Extend/nhsdImgScrollA.js"></script>
 6     <link href="/CSS/IndexScroll/imageScrollA2.css" rel="stylesheet" />
 7     <script type="text/javascript">
 8         $(document).ready(function () {
 9 10             var imgsConfigData = [//这里配置了，就不需要后台叫数据
11                                     {
12                                         'imgsrc': '/Images/IndexScroll/1.jpg',
13                                         'alt': '笑傲江湖',
14                                         'href': 'http://www.cnblogs.com/nhsd/',
15                                         'title': '笑傲江湖'
16                                     }, {
17                                         'imgsrc': '/Images/IndexScroll/2.jpg',
18                                         'alt': '天龙八部',
19                                         'href': 'http://www.cnblogs.com/nhsd/',
20                                         'title': '天龙八部'
21                                     }, {
22                                         'imgsrc': '/Images/IndexScroll/3.jpg',
23                                         'alt': '神雕侠女',
24                                         'href': 'http://www.cnblogs.com/nhsd/',
25                                         'title': '神雕侠女'
26                                     }, {
27                                         'imgsrc': '/Images/IndexScroll/4.jpg',
28                                         'alt': '倚天屠龙记',
29                                         'href': 'http://www.cnblogs.com/nhsd/',
30                                         'title': '倚天屠龙记'
31                                     }, {
32                                         'imgsrc': '/Images/IndexScroll/5.jpg',
33                                         'alt': '三国演义',
34                                         'href': 'http://www.cnblogs.com/nhsd/',
35                                         'title': '三国演义'
36                                     }
37                                 ];
38             $("#nhsdscrolladiv").nhsdImgScrollA({ 'imgsConfigData': imgsConfigData });
39         });
40     </script>
41 </head>
42 <body>
43     <div class="index_main">
44         <div id="nhsdscrolladiv" class="index_pics">
45             
46         </div>
47     </div>
48 </body>
49 </html>

View Code

另个是通知CSS样式，请根据需要加入

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 
  6 body {
  7     font-size: 12px;
  8     font-family: Verdana,"宋体",Arial,Helvetica,sans-serif;
  9     margin: 0;
 10     padding: 0;
 11     line-height: 160%;
 12     color: #333;
 13 }
 14 
 15 html, body {
 16     color: #000;
 17     background: #fff;
 18 }
 19 
 20 p {
 21     display: block;
 22     -webkit-margin-before: 1em;
 23     -webkit-margin-after: 1em;
 24     -webkit-margin-start: 0px;
 25     -webkit-margin-end: 0px;
 26 }
 27 
 28 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
 29     margin: 0;
 30     padding: 0;
 31     list-style: none;
 32 }
 33 
 34 div {
 35     display: block;
 36 }
 37 
 38 a {
 39     text-decoration: none;
 40     color: #333;
 41 }
 42 
 43     a:hover {
 44         color: #14a0cd;
 45         text-decoration:underline;
 46     }
 47 
 48 img {
 49     border: none;
 50     line-height: 0;
 51     margin: 0;
 52     padding: 0;
 53     vertical-align: bottom;
 54 }
 55 
 56 .inform_index_div {
 57     margin: 3px;
 58 }
 59 
 60 .div_main {
 61     margin: 0 auto;
 62     width: 970px;
 63     overflow: hidden;
 64 }
 65 
 66 .div_main_header {
 67     overflow: hidden;
 68     margin-bottom: 10px;
 69     height: 75px;
 70     text-align: right;
 71 }
 72 
 73 .div_main_header_logo {
 74     float: left;
 75 }
 76 
 77 .div_main_header_p {
 78 }
 79 
 80 .div_main_header_navight {
 81     background: url(/Images/Extend/nav_bg.jpg) no-repeat;
 82     height: 41px;
 83     line-height: 41px;
 84     padding: 0 5px;
 85     margin-bottom: 15px;
 86     width: 690px;
 87     float: right;
 88 }
 89 
 90     .div_main_header_navight ul li {
 91         float: left;
 92         text-align: center;
 93         font-size: 16px;
 94         font-family: "微软雅黑";
 95         background: url(/Images/Extend/nav_line.jpg) no-repeat right center;
 96     }
 97 
 98         .div_main_header_navight ul li a {
 99             color: #fff;
100             text-shadow: 1px 1px #ff5000;
101             display: inline-block;
102             width: 115px;
103         }
104 
105 .div_main_content {
106 }
107 
108 .div_main_footer {
109     text-align: center;
110 }
111 
112     .div_main_footer a {
113         color: #666;
114     }
115 
116 .div_main_footer_link_title {
117     font-weight: bold;
118     color: #999;
119 }
120 
121 .div_main_footer_link2 span {
122     margin: 8px;
123 }
124 
125 .div_main_footer_link1 a {
126     margin: 4px;
127 }
128 
129 .phone_a_style {
130     color: red;
131     font-weight: bold;
132     font-size: 1.2em;
133 }
134 
135 .phone_a_font_style {
136     font-size: 14px;
137     font-family: "宋体";
138 }
139 
140 .index_main {
141     height: 800px;
142     border: 1px solid #6699ff;
143 }
144 
145 .index_pics {
146     width: 966px;
147     height: 320px;
148     border: 1px solid red;
149     overflow: hidden;
150 }
151 
152 .index_buy_flow {
153     width: 966px;
154     height: 80px;
155     border: 1px solid red;
156 }
157 
158 .index_repast {
159 }
160 
161 .index_repast_navight {
162 }
163 
164 .index_repast_context {
165 }

View Code

PS：

欢迎加群： 258387392 讨论交流。

posted @ 2014-05-14 15:26 年华时代阅读(1643) 评论(2) 编辑收藏举报

刷新页面返回顶部

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

公告