jQuery（7）---实现仿京东 在售商品图片的切换效果
页面如下：
附源码：
note2.html
$(document).ready(function(){var count = 0;// 记录数var size = 4; // 每页显示的图片个数var $imgs = $("#spec-img img"); // 获取所有的imgvar 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;}});});