|
该篇文章实现的是焦点图，图片大小为960X315
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head runat="server">
<title>jQuery+CSS实现的焦点图</title>
<link href="css/photoScroll.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var curr = 0;
var todo = 0;
var num = $('#jsNav .trigger').length;
$('#jsNav .trigger').each(function (i) {
$(this).click(function () {
curr = i;
$("#js img").eq(i).fadeIn("slow").siblings("img").hide();
$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");
return false;
});
});
var scorll = function (flag) { //flag为true时，表示前翻 为false时表示后翻
if (flag) {
if (curr == 0) {
todo = 2;
}
else
todo = (curr - 1) % num;
}
else {
todo = (curr + 1) % num;
}
$("#jsNav .trigger").eq(todo).click();
};
$("#prev").click(function () {
scorll(true);
return false;
});
$("#next").click(function () {
scorll(false);
return false;
});
var timer = setInterval(function () {
todo = (curr + 1) % num;
$("#jsNav .trigger").eq(todo).click();
}, 3000);
$("#jsNav a").hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(function () {
todo = (curr + 1) % num;
$("#jsNav .trigger").eq(todo).click();
}, 3000);
});
});
</script>
</head>
<body style="text-align:center">
<div id="js" class="js">
<img alt="" src="http://www./images/20101206/3/01.jpg"/>
<img style="display: none" alt="" src="http://www./images/20101206/3/02.jpg"/>
<img style="display: none" alt="" src="http://www./images/20101206/3/03.jpg"/>
<div id="jsNav" class="jsNav">
<a id="prev" class="prevBtn" href="javascript:void(0)"></a>
<a class="trigger imgSelected" href="javascript:void(0)">1</a>
<a class="trigger" href="javascript:void(0)">2</a>
<a class="trigger" href="javascript:void(0)">3</a>
<a id="next" class="nextBtn" href="javascript:void(0)"></a>
</div>
</div>
</body>
</html>
其中photoScroll.css文件实现代码为：
body {
line-height: 1.5; font-family: Tahoma, Helvetica, Arial, sans-serif; color: #333333; font-size: 12px
}
a {
color: #333; text-decoration: none
}
a:hover {
text-decoration: underline
}
.js {
position: relative; width: 960px; height: 315px;
margin:0 auto;
}
.jsNav {
position: absolute;
width: 125px;
bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
height: 30px;
right: 10px;
font-weight: bold;
background: url(../images/jsNav.png) no-repeat
}
.jsNav a {
text-align: center;
line-height: 30px;
width: 25px;
float: left;
vertical-align: middle
}
.prevBtn {
display: block;
background:url(../images/jsNav.png) 0px -30px no-repeat;
height: 30px
}
.nextBtn {
display: block;
background:url(../images/jsNav.png) -100px -30px no-repeat;
height: 30px
}
.imgSelected {
background:url(../images/jsNav.png) 1px -60px no-repeat;
color: #000
}
其中jsNav.png为下图：  |
|
|
