脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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 参数，否则不能设置该参数。
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_pp_current').css('opacity', '0.7').eq(index).css('opacity', '1').addClass('scrolla_pp_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 = $('<p></p>', { 'class': 'scrolla_pp' }).appendTo($('#' + $parentDivId));
77 $imgA = $('<a></a>', { 'href': 'javascropt:void(0);', 'class': 'scrolla_pp_a' }).appendTo($pDiv);
78 $pTitleDiv = $('<p></p>', { 'class': 'scrolla_pp_p' }).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);
复制代码
CSS样式
复制代码
1 #dv {
2 margin: 0 auto;
3 width: 966px;
4 border: 1px solid;
5 }
6
7 .scrolla_pp {
8 width: 966px;
9 height: 300px;
10 position: absolute;
11 }
12
13 .scrolla_pp a img {
14 width: 966px;
15 height: 300px;
16 position: absolute;
17 overflow: hidden;
18 }
19
20 .scrolla_pp p {
21 /*position: absolute;
22 text-align: center;
23 width: 966px;*/
24 }
25
26 .scrolla_pp p 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_pp p a span {
41 font-Size: 12px;
42 display: block;
43 }
44
45 .scrolla_pp_p {
46 position: absolute;
47 text-align: center;
48 width: 966px;
49 height: 30px;
50 bottom: 0;
51 }
52
53 .scrolla_pp p a:hover {
54 text-decoration: underline;
55 }
56
57 .scrolla_pp p .scrolla_pp_current {
58 background: url(/Images/Extend/adindex.gif) no-repeat center 27px #37A7D7;
59 }
60
61 .scrolla_pp_a {
62 }
复制代码
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 $("#index_inform").nhsdLBMenu({ 'height': '62px' });
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 $("#nhsdscrollap").nhsdImgScrollA({ 'imgsConfigData': imgsConfigData });
39 });
40 </script>
41 </head>
42 <body>
43 <p class="index_main">
44 <p id="nhsdscrollap" class="index_pics">
45
46 </p>
47 </p>
48 </body>
49 </html>
复制代码
另个是通知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, p, 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 p {
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_p {
57 margin: 3px;
58 }
59
60 .p_main {
61 margin: 0 auto;
62 width: 970px;
63 overflow: hidden;
64 }
65
66 .p_main_header {
67 overflow: hidden;
68 margin-bottom: 10px;
69 height: 75px;
70 text-align: right;
71 }
72
73 .p_main_header_logo {
74 float: left;
75 }
76
77 .p_main_header_p {
78 }
79
80 .p_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 .p_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 .p_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 .p_main_content {
106 }
107
108 .p_main_footer {
109 text-align: center;
110 }
111
112 .p_main_footer a {
113 color: #666;
114 }
115
116 .p_main_footer_link_title {
117 font-weight: bold;
118 color: #999;
119 }
120
121 .p_main_footer_link2 span {
122 margin: 8px;
123 }
124
125 .p_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 }
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery插件实例三:图片滚动[切换]效果一全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery插件实例三:图片滚动[切换]效果一所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。