焦点图插件

<div id="test">
<h1>DEMO1</h1>
<div id="demo1" class="hd res">
<ul>
<li><a href=""><img src="images/1.jpg" this is the Focus title 1" data-info="this is the Focus info for 1" /></a></li>
<li><a href=""><img src="images/2.jpg" this is the Focus title 2" data-info="this is the Focus info for 2" /></a></li>
<li><a href=""><img src="images/3.jpg" this is the Focus title 3" data-info="this is the Focus info for 3" /></a></li>
<li><a href=""><img src="images/4.jpg" this is the Focus title 4" data-info="this is the Focus info for 4" /></a></li>
<li><a href=""><img src="images/5.jpg" this is the Focus title 5" data-info="this is the Focus info for 5" /></a></li>
</ul>
</div>

</div>

JS调用

$(function(){
$("#demo1").banner({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
});
})

JS代码

(function($){
$.fn.banner = function(J){
$.extend({
index : 0,
tarrget : 'click',
speed : 10000,
showway : 'dowm'
},J)

var index = J.index,
tarrget = J.tarrget,
speed = J.speed,
showway = J.showway;

var obj = $(this);

obj.children('ul').addClass('FocusPic')
var ul = obj.children('.FocusPic');
var li = ul.children('li');
var lisize = li.size();

li.each(function(){
var T = $(this);
var I = T.index();
var img = T.find('img');
var title = img.prop('alt');
var info = img.data('info');
T.append('<p>' + info + '</p><b>' + title + '</b>');
if (I != index){
T.hide();
}
})

obj.append('<div class="FocusLeft"></div><div class="FocusRight"></div><ul class="FocusNum"></ul>');
var num = obj.children('ul.FocusNum');
for(var i = 1;i<=lisize;i++){
num.append('<li>' + i + '</li>');
}

var numli = num.children('li');
numli.each(function(){
var T = $(this);
var I = T.index();
if(I == index){
T.addClass("on");
}
T.on(tarrget,function(){
T.addClass('on').siblings('li').removeClass('on');
imgway(I)
})
})

var left = obj.children('.FocusLeft');
var right = obj.children('.FocusRight');

left.click(function(){
goLeft();
})

right.click(function(){
goRight();
})

function goLeft(){
var I = num.children('li.on').index() - 1;
if (I == -1){
var I = lisize - 1;
}
numon(I);
imgway(I)
}

function goRight(){
var I = num.children('li.on').index() + 1;
if(I == lisize){
var I = 0;
}
numon(I);
imgway(I)
}

function numon(I){
numli.eq(I).addClass('on').siblings().removeClass('on')
}

function imgway(I){
switch(showway){
case 'dowm' :
li.stop().eq(I).slideDown(500).siblings().slideUp(500);
break;
default :
li.eq(I).fadeIn(200).siblings().hide()
}
}

function timer(){
return setInterval(function(){
goRight();
},speed)
}
var atimer = timer();
obj.hover(function(){
clearInterval(atimer)
},function(){
var atimer = timer();
})
}
})(jQuery)

转自FungLeo's Blog