图片切换效果在很多网站上都能看到，是一种常见的广告/活动宣传方式，通常位于网页上端。这个插件是众多图片切换效果的形式中的一种，数据源可在前端配置，也可从后台通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': '',
14 'title': '笑傲江湖'
15 }, {
16 'imgsrc': '/Images/ImgScrollA/2.jpg',
17 'alt': '天龙八部',
18 'href': '',
19 'title': '天龙八部'
20 }, {
21 'imgsrc': '/Images/ImgScrollA/3.jpg',
22 'alt': '神雕侠女',
23 'href': '',
24 'title': '神雕侠女'
25 }, {
26 'imgsrc': '/Images/ImgScrollA/4.jpg',
27 'alt': '倚天屠龙记',
28 'href': '',
29 'title': '倚天屠龙记'
30 }, {
31 'imgsrc': '/Images/ImgScrollA/5.jpg',
32 'alt': '三国演义',
33 'href': '',
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': '',
15 'title': '笑傲江湖'
16 }, {
17 'imgsrc': '/Images/IndexScroll/2.jpg',
18 'alt': '天龙八部',
19 'href': '',
20 'title': '天龙八部'
21 }, {
22 'imgsrc': '/Images/IndexScroll/3.jpg',
23 'alt': '神雕侠女',
24 'href': '',
25 'title': '神雕侠女'
26 }, {
27 'imgsrc': '/Images/IndexScroll/4.jpg',
28 'alt': '倚天屠龙记',
29 'href': '',
30 'title': '倚天屠龙记'
31 }, {
32 'imgsrc': '/Images/IndexScroll/5.jpg',
33 'alt': '三国演义',
34 'href': '',
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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
