以前写了一个JQUERY焦点图插件。但是过于冗长，其逻辑非常费解。今天心血来潮，决定重新写一下。暂时还没有封装成插件。回头抽时间封装成插件。
我的焦点图要实现的功能如下：
- HTML结构异常简单
- 所有样式在CSS中实现，而不是在JS中实现，便于修改样式。
- 实现自动轮播（废话）
- 有标题，有导读
- 有方向控制，向左滚动，向右滚动
之前写的当然都满足我的这些要求。但是不够简练。今天写的，我自己感觉好多了。
首先，HTML结构如下：
代码语言：javascript复制<div id="FengFouse">
<ul>
<li><a href="#"><img src="image/1.jpg" alt="this is the fouse title 1" data-info="this is the fouse info for 1"></a></li>
<li><a href="#"><img src="image/2.jpg" alt="this is the fouse title 2" data-info="this is the fouse info for 2"></a></li>
<li><a href="#"><img src="image/3.jpg" alt="this is the fouse title 3" data-info="this is the fouse info for 3"></a></li>
<li><a href="#"><img src="image/4.jpg" alt="this is the fouse title 4" data-info="this is the fouse info for 4"></a></li>
<li><a href="#"><img src="image/5.jpg" alt="this is the fouse title 5" data-info="this is the fouse info for 5"></a></li>
</ul>
</div>然后是CSS。我是用SASS写的。代码如下：
代码语言：javascript复制#FengFouse {
$width:500px;
$height:400px;
width: $width;height: $height;overflow: hidden;position: relative;
.FousePic {
p,strong {position: absolute;display: block;background:rgba(#000, 0.5);color: #fff;}
p {border-radius: 5px;top: 30px;left: 30px;padding: 5px 10px;}
strong {bottom: 0;left: 0;font-size: 14px;width: $width;text-indent: 10px;height: 36px;line-height: 36px;}
}
.FouseNum {
position: absolute;right: 0;bottom: 0;height: 31px;
li {
float: left;height: 26px;line-height: 26px;background:rgba(#fff,0.5);width: 26px;
color: #fff;margin-right: 5px;text-align: center;border-radius: 3px;cursor: pointer;
&.on {background: #fff;color: #555;}
}
}
.FouseLeft,.FouseRight {
position: absolute;width: 30px;height: 80px;top: 160px;background:rgba(#000,0.5);left: 10px;cursor: pointer;
}
.FouseRight {right: 10px;left: auto;}
}编译成CSS如下：
代码语言：javascript复制#FengFouse {
width: 500px;
height: 400px;
overflow: hidden;
position: relative;
}
#FengFouse .FousePic p, #FengFouse .FousePic strong {
position: absolute;
display: block;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
#FengFouse .FousePic p {
border-radius: 5px;
top: 30px;
left: 30px;
padding: 5px 10px;
}
#FengFouse .FousePic strong {
bottom: 0;
left: 0;
font-size: 14px;
width: 500px;
text-indent: 10px;
height: 36px;
line-height: 36px;
}
#FengFouse .FouseNum {
position: absolute;
right: 0;
bottom: 0;
height: 31px;
}
#FengFouse .FouseNum li {
float: left;
height: 26px;
line-height: 26px;
background: rgba(255, 255, 255, 0.5);
width: 26px;
color: #fff;
margin-right: 5px;
text-align: center;
border-radius: 3px;
cursor: pointer;
}
#FengFouse .FouseNum li.on {
background: #fff;
color: #555;
}
#FengFouse .FouseLeft, #FengFouse .FouseRight {
position: absolute;
width: 30px;
height: 80px;
top: 160px;
background: rgba(0, 0, 0, 0.5);
left: 10px;
cursor: pointer;
}
#FengFouse .FouseRight {
right: 10px;
left: auto;
}最后是JQUERY代码，如下：
代码语言：javascript复制$(function(){
var showWay = "";
var Obj = $("#FengFouse");
Obj.children('ul').addClass('FousePic');
var Ul = Obj.children('.FousePic'),
Li = Ul.children('li'),
LiSize = Li.size();
Li.each(function(){
var T = $(this),
I = T.index(),
// A = T.children('a'),
Img = T.find('img'),
Title = Img.prop('alt'),
Info = Img.data('info');
T.append('<p>' Info '</p><strong>' Title '</strong>');
if (I!=0) {
T.hide();
}
});
Obj.append('<div class="FouseLeft"></div><div class="FouseRight"></div><ul class="FouseNum"></ul>');
var Num = Obj.children('ul.FouseNum');
for (var i = 1; i <= LiSize; i ) {
Num.append('<li>' i '</li>');
}
var NumLi = Num.children('li');
NumLi.each(function(){
var T = $(this),
I = T.index();
if (I==0) {
T.addClass('on');
}
T.click(function() {
T.addClass('on').siblings('li').removeClass('on');
SandH(I);
});
});
//
var FL = Obj.children('.FouseLeft'),
FR = Obj.children('.FouseRight');
FL.click(function(){
GoLeft();
});
FR.click(function(){
GoRight();
});
function GoLeft(){
var I = Num.children('li.on').index()-1;
if (I==-1) {
var I = LiSize-1;
}
NumOn(I);
SandH(I);
}
function GoRight(){
var I = Num.children('li.on').index() 1;
if (I==LiSize) {
var I = 0;
}
NumOn(I);
SandH(I);
}
function NumOn(I) {
NumLi.eq(I).addClass("on").siblings().removeClass("on");
};
function SandH(I) {
switch (showWay) {
case "down":
Li.eq(I).slideDown(500).siblings().slideUp(500);
break;
default:
Li.eq(I).fadeIn(200).siblings().hide();
}
};
function actionDo(){
return setInterval(function(){
GoRight();
},2000);
};
var StopAct = actionDo();
Obj.hover(function() {
clearInterval(StopAct);
}, function() {
StopAct = actionDo();
});
});时间不早，该睡觉了。明天继续努力学习！！
