jQuery（七）-实现仿京东 在售商品图片的切换效果
页面如下：
附源码：
note2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>note2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/note2.js"></script>
<style type="text/css">
.lh li {
list-style-type: none;
/* float: left; */
display: inline;
}
#dt img {
border: 1px solid threedface;
}
.spec-control {
display: block;
position: absolute;
top: 415px;
width: 17px;
height: 54px;
left: 300px;
}
.spec-control2 {
display: block;
position: absolute;
top: 415px;
width: 17px;
height: 54px;
left: 15px;
}
.lh img {
border: "1px solid threedface";
margin-left: 2px;
}
#spec-forward {
background-image: url("../images/r.jpg");
background-repeat: no-repeat;
width: 20px;
height: 60px;
}
#spec-backward {
background-image: url("../images/l.jpg");
background-repeat: no-repeat;
width: 20px;
height: 60px;
}
</style>
</head>
<body>
<h3 align="left">三星GALAXY Note II</h3>
<div id="dt" style="width: 400px">
<img alt="" src="../images/big1.jpg" width="350" height="350" />
</div>
<div id="spec">
<a href="javascript:;" class="spec-control" id="spec-forward"></a>
<a href="javascript:;" class="spec-control2" id="spec-backward"></a>
<div class="spec-items" style="border: 1px solid grey; width: 350px;">
<ul class="lh" id="spec-img">
<li>
<img alt="" src="../images/small1.jpg" name="../images/big1.jpg">
</li>
<li>
<img alt="" src="../images/small2.jpg" name="../images/big2.jpg">
</li>
<li>
<img alt="" src="../images/small3.jpg" name="../images/big3.jpg">
</li>
<li>
<img alt="" src="../images/small4.jpg" name="../images/big4.jpg">
</li>
<li>
<img alt="" src="../images/small5.jpg" name="../images/big5.jpg">
</li>
<li>
<img alt="" src="../images/small6.jpg" name="../images/big6.jpg">
</li>
<li>
<img alt="" src="../images/small7.jpg" name="../images/big7.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
note2
$(document).ready(function(){
var count = 0;// 记录数
var size = 4; // 每页显示的图片个数
var $imgs = $("#spec-img img"); // 获取所有的img
var len = $imgs.length;// 得到img的个数
var ycount = -1; // 原有数据
// 给所有图片注册 鼠标移动事件
$imgs.mouseover(function(e) {
// 当鼠标移动到某个图片时，获取其图片的name属性值，把它设置到id=dt中得img中
$("#dt img").attr("src", this.name); // html中怎么扩展标签的属性
// 鼠标移上去时,修改样式 (添加红色边框)
$(this).css({
border : "1px solid red"
});
}).mouseout(function() {
// 鼠标移出时,修改边框为原有样式
$(this).css({
border : "1px solid threedface"
});
});
// 获取id="spec-img"中所有的li元素
var $lis = $("#spec-img li");
// 判断图片的个数 如果大于4就进行隐藏数据
if ($lis.length > size) {
$lis.each(function(i) {
if (i >= size) {
$(this).hide();
}
});
}
// 考虑左按钮处理
$("#spec-backward").bind("click", function() {
$($imgs[ycount]).css({
border : "1px solid threedface"
}).show();
$($imgs[count]).css({
border : "1px solid red"
}).show();
if (len <= size) { // 如果图片个数小于等于每页显示的数据
// 则什么都不处理
} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
$lis.each(function(i) {// 遍历每个图片
var cs = count - size; // 求出差值
if (cs <= 0) { // 如果 差值结果 小于等于0 每页显示的个数
// 为前4个其他隐藏
if (i >= size) {
$(this).hide();
} else {
$(this).show();
}
} else { // 否则 前后都有隐藏的数据
if (i < cs || i >= count) { // 隐藏前部分的数据为i<cs
// 隐藏后半部分的数据为i>=count操作
$(this).hide();
} else {
$(this).show();
}
}
});
}
ycount = count;
count--;
if (count <= 0) {
count = len;
}
});
$("#spec-forward").bind("click", function() {
$($imgs[ycount]).css({
border : "1px solid threedface"
}).show();
$($imgs[count]).css({
border : "1px solid red"
}).show();
if (len <= size) { // 如果图片个数小于等于每页显示的数据
// 则什么都不处理
} else { // 否则根据每页显示的个数 隐藏需要隐藏的数据
// 算法 len
$lis.each(function(i) {// 遍历每个图片
var cs = count - size; // 求出差值
if (cs <= 0) { // 如果 差值结果 小于等于0 每页显示的个数
// 为前4个其他隐藏
if (i >= size) {
$(this).hide();
} else {
$(this).show();
}
} else { // 否则 前后都有隐藏的数据
if (i <= cs || i > count) { // 隐藏前部分的数据为i<=cs
// 隐藏后半部分的数据为i>count操作
$(this).hide();
} else {
$(this).show();
}
}
});
}
ycount = count;
count++;
if (count >= 7) {
count = 0;
}
});
});
.js