自己写的焦点图片的插件，使用方法简单说明一下
index.html页面具体结构如下
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>百合网专题</title> 6 <link href="css/qxjt.css" rel="stylesheet" type="text/css" /> 7 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 8 <script type="text/javascript" src="js/foursFn.js"></script> 9 </head> 10 11 <body> 12 <div class="fours"> 13 <div class="srcollImg"> 14 <div class="srcollBox" id="srcollBox"> 15 <ul> 16 <li><img src="images/fours_1.jpg" alt="" /></li> 17 <li style="display:none;"><img src="images/fours_2.jpg" alt="" /></li> 18 <li style="display:none;"><img src="images/fours_3.jpg" alt="" /></li> 19 <li style="display:none;"><img src="images/fours_4.jpg" alt="" /></li> 20 <li style="display:none;"><img src="images/fours_5.jpg" alt="" /></li> 21 </ul> 22 <div class="state"> 23 <p>1</p> 24 <p>2</p> 25 <p>3</p> 26 <p>4</p> 27 <p>5</p> 28 </div> 29 <ol> 30 <!-- <li></li> --> 31 </ol> 32 <span class="prev"></span> 33 <span class="next"></span> 34 </div> 35 </div> 36 </div> 37 </body> 38 </html>
qxjt.css如下
1 *{ padding:0; margin:0;}
2 body{ font:400 15px/21px "Microsoft YaHei"; color:#2a363c; background:#000;}
3 fieldset,img { border:0; }
4 ol,ul { list-style:none; }
5 caption,th { text-align:left; }
6 .fixfloat:after{content:".";display:block;clear:both;visibility:hidden;height:0;}
7 .fixfloat{zoom:1}
8
9 .fours{height:424px;}
10 .fours .srcollImg{ width:846px; height:307px; padding-top:20px; margin:100px auto; background:url(../images/jd_bg.gif) no-repeat;}
11 .fours .srcollImg .srcollBox{position:relative; width:805px; height:286px; overflow:hidden; margin:0 auto;}
12 .fours .srcollImg .srcollBox .prev{position:absolute; top:126px; left:0; width:22px; height:35px; background:url(../images/prev.png); cursor:pointer; z-index:9;}
13 .fours .srcollImg .srcollBox .next{position:absolute; top:126px; right:0; width:22px; height:35px; background:url(../images/next.png); cursor:pointer; z-index:9;}
14 .fours .srcollImg .srcollBox ol{position:absolute; bottom:10px; left:22px; z-index:9;}
15 .fours .srcollImg .srcollBox ol li{float:left; width:21px; height:21px; margin-right:5px; overflow:hidden; background:#fff; text-align:center; -moz-border-radius:11px; -webkit-border-radius:11px; border-radius:11px;}
16 .fours .srcollImg .srcollBox ol li.on{background:#7f7c7c;}
17 .fours .srcollImg .srcollBox ul{position:absolute; top:0; left:0; z-index:1;}
18 .fours .srcollImg .srcollBox .state{position:absolute; bottom:0; left:0; width:100%; height:40px; background:rgba(0,0,0,.7); z-index:5;}
19 .fours .srcollImg .srcollBox .state p{padding:0 15px; color:#fff; line-height:40px; text-align:right;}
首先引入jq的文件
然后引入插件文件foursFn.js
1 $.fn.foursFn = function (opt) {
2 opt = $.extend({
3 isTab: true,
4 isTabNum: false,
5 tabClassName: ‘on‘,
6 isState: true,
7 stateClassName: ‘.state‘,
8 isPage: true,
9 oPrev: ‘.prev‘,
10 oNext: ‘.next‘,
11 timer: 1500
12 }, opt);
13
14 return this.each(function() {
15 var $this = $(this);
16 var iFousId = 0;
17 var oS_con =$this.find(‘ul li‘);
18 var oS_prev = $this.find(opt.oPrev);
19 var oS_next = $this.find(opt.oNext);
20 var oS_nav = $this.find(‘ol‘);
21 var oS_state = $this.find(opt.stateClassName);
22 var moonTime = setInterval(InterTime, opt.timer);
23
24 if (opt.isTab && oS_nav.size()>0) {
25 oS_nav.empty();
26 for (var i = 0; i < oS_con.size(); i++) {
27 opt.isTabNum ? oS_nav.append(‘<li>‘+ (i+1) +‘</li>‘) : oS_nav.append(‘<li></li>‘);
28 };
29
30 oS_nav.find(‘li‘).eq(0).addClass(‘on‘);
31 oS_nav.bind(‘click‘, function(ev) {
32 var ev = ev || window.event;
33 var target = ev.target || ev.srcElement;
34 if (target.nodeName.toLowerCase() == "li") {
35 iFousId = oS_nav.find(‘li‘).index(target);
36 InterTab();
37 }
38 });
39 }
40 if(opt.isPage && oS_prev.size()>0 && oS_next.size()>0){
41 oS_prev.bind(‘click‘, function() {
42 iFousId--;
43 if(iFousId < 0){
44 iFousId = oS_con.size()-1;
45 }
46 InterTab();
47 });
48 oS_prev.bind(‘mouseover‘, function() {
49 clearInterval(moonTime);
50 });
51 oS_prev.bind(‘mouseout‘, function() {
52 moonTime = setInterval(InterTime, opt.timer);
53 });
54
55 oS_next.bind(‘click‘, function() {
56 iFousId++;
57 if (iFousId >= oS_con.size()) {
58 iFousId = 0;
59 }
60 InterTab();
61 });
62 oS_next.bind(‘mouseover‘, function() {
63 clearInterval(moonTime);
64 });
65 oS_next.bind(‘mouseout‘, function() {
66 moonTime = setInterval(InterTime, opt.timer);
67 });
68 }
69 function InterTab() {
70 opt.isTab ? oS_nav.find(‘li‘).eq(iFousId).addClass(‘on‘).siblings().removeClass(‘on‘) : ‘‘;
71 oS_con.eq(iFousId).fadeIn(‘slow‘).siblings().css(‘display‘, ‘none‘);
72 opt.isState ? oS_state.children(‘p‘).eq(iFousId).fadeIn(‘slow‘).siblings().css(‘display‘, ‘none‘) : ‘‘;
73 }
74 function InterTime () {
75 InterTab();
76 iFousId++;
77 if (iFousId >= oS_con.size()) {
78 iFousId = 0;
79 }
80 }
81 });
82 }
到这里准备工作已ok，了
接下来就是我们调用插件的具体使用，
1 jQuery(document).ready(function($) {
2 // 焦点图
3 $(‘#srcollBox‘).foursFn({
4 isTab: false,
5 isTabNum: false,
6 tabClassName: ‘on‘,
7 isState: true,
8 stateClassName: ‘.state‘,
9 isPage: true,
10 oPrev: ‘.prev‘,
11 oNext: ‘.next‘,
12 timer: 1500
13 });
14 });
插件foursFn里面有几项参数，我们可以更具实际情况来选择设置
- isTab 是否有tab
- isTabNum tab里是否显示数字
- tabClassName 当前tab的样式
- isState 是否有图片说明
- stateClassName 图片说明的样式
- isPage 是否有上下页
- oPrev 上一页的样式
- oNext 下一页的样式
- timer 图片切换时间
假如不用上下页，我们就需要把isPage设置为flase，并要在html页面里把相应的标签删除掉。
只要保证大体结构变，插件就可以正常运行！
时间： 2024-11-07 22:24:05