实现点击箭头切换图片页和相册滚动
再来介绍一个同样是两天之前写的一个小任务，这个比上一个较复杂，但是写的时候速度却比上一个快了，也许这就是熟能生巧吧，但是我这个项目写的不是很完美，自己有一些懒惰的心理，也不想深入地去思考了，差不多就行了吧，因为我觉得刚起步不要对自己吹毛求疵，把自己逼得坐不住了反而学不好，等以后能力慢慢增强了，写这些东西或者说把这些东西写的完美一点应该不在话下。
<div class="bbs mr" >
<div class="arrleft" ></div>
<div class="zsarea" id="zsarea" >
<img src="images/pic.jpg" width="950" height="634" />
<div class="imgnr">各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的各种介绍什么的</div>
</div>
<div class="arrright" ></div>
</div>
<div class=" ss" >
<a href="#" class="up"><img src="images/up.png" width="100" height="18" alt=""/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="1"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="2"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" class="now" alt="3"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="4"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="5"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="6"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="7"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="8"/></a>
<a href="#" class="pic"><img src="images/pic.jpg" width="100" height="67" alt="9"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="1"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="2"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="3"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="4"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="5"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="6"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="7"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="8"/></a>
<a href="#" class="one"><img src="images/one.jpg" width="100" height="67" alt="9"/></a>
<a href="#" class="down"><img src="images/down.png" width="100" height="18" alt=""/></a>
</div>
我要实现的两个功能呢，一个是大图片的左右箭头，保证在点击这两个箭头的时候图片会进行切换，图片下方的文字也要跟随一起进行切换，并且右边那一排相册的那个白框也要在当前显示的图片上，第二个功能呢，就是右边那排图片最上边和最下边的上下箭头按钮，这个相册包含了9张图片，而实际上，总共有18张，其中的9张没有显示出来，我要做的就是使在点击向下箭头的时候图片要实现向上滚动的效果，下面出现的图片要一个一个把上面的图片顶上去，当所有的图片都显示过以后，再点击向下箭头按钮就不动了，此时如果点击向上箭头按钮，相册就会向上滚动，在这个过程当中，那个表示当前图片的白框对应的图片和图片的描述性文字要显示在左方大图片和下面的文字中。
$(function () {
var arrleft = $(".arrleft");
var arrright = $(".arrright");
var up = $(".up");
var down = $(".down");
//以上为获取左右箭头和上下箭头，方便后面对其进行操作，添加事件
var imgs = $(".ss a img");
var len = imgs.length;
//以上为相册中的18个照片，把它们放在一个数组中，以后要循环显示
var zsareaImg = $("#zsarea img");
var imgnr = $(".imgnr");
//以上为左边的大图片占位符和大图片下面的描述性文字占位符
var oneImgs = $(".one");
oneImgs.hide();
//以上为获取后面9张的图片并将其进行隐藏
//以下分别给各个箭头添加单击事件
arrleft.click(function () {
for (var i = 2; i < len-1; i++) { //这里的 i 为什么要从2开始，是因为 imgs 数组的第一个元素是向上箭头，而这里的2表示第三个元素，因为下面一行有prev表示前一个元素，这里有些混乱，其实我也不知道什么意思，我刚才说这个项目不完美其实就在这个地方，可能是因为我数学不好，头脑不清，这个关系总理不过来，就算了
if (imgs.eq(i).parent('a').prev().children('img').css('height') == 18) {
break;
}
if (imgs.eq(i).hasClass('now')) { //通过now类来控制当前显示的图片
imgs.eq(i).removeClass('now');
imgs.eq(i).parent('a').prev().children('img').addClass('now');
zsareaImg.attr("src", imgs.eq(i).parent('a').prev().children('img').attr("src"));
imgnr.text(imgs.eq(i).parent('a').prev().children('img').attr("alt"));
//前面所说的改变大图片和下面的描述性文字实际上就是通过改变该元素的 src 属性和 alt 属性来实现的
break;
}
}
});
arrright.click(function () {
for (var i = 1; i < len-2; i++) {
if (imgs.eq(i).parent('a').next().children('img').css('height') == 18) {
break;
}
if (imgs.eq(i).hasClass('now')) {
imgs.eq(i).removeClass('now');
imgs.eq(i).parent('a').next().children('img').addClass('now');
zsareaImg.attr("src", imgs.eq(i).parent('a').next().children('img').attr("src"));
imgnr.text(imgs.eq(i).parent('a').next().children('img').attr("alt"));
break;
}
}
});
up.click(function () {
for (var i = len - 2; i > 1; i--) {
if (imgs.eq(i).parent('a').prev().hasClass('up')) {
break;
}
imgs.eq(i).attr("src", imgs.eq(i).parent('a').prev().children('img').attr('src'));
imgs.eq(i).attr("alt", imgs.eq(i).parent('a').prev().children('img').attr('alt'));
}
for (var i = 1; i < len - 1; i++) {
if (imgs.eq(i).hasClass('now')) {
zsareaImg.attr("src", imgs.eq(i).attr("src"));
imgnr.text(imgs.eq(i).attr("alt"));
}
}
});
down.click(function (e) {
e.preventDefault();
for (var i = 1; i < len - 1; i++) {
if (imgs.eq(i).parent('a').next().hasClass('down')) {
break;
}
imgs.eq(i).attr("src", imgs.eq(i).parent('a').next().children('img').attr('src'));
imgs.eq(i).attr("alt", imgs.eq(i).parent('a').next().children('img').attr('alt'));
}
for (var i = 1; i < len - 1; i++) {
if (imgs.eq(i).hasClass('now')) {
zsareaImg.attr("src", imgs.eq(i).attr("src"));
imgnr.text(imgs.eq(i).attr("alt"));
}
}
});
});
