2011-12-30 36 views
0

我正在調整最初有10個縮略圖的jQuery滑塊。我只需要4個,我已經調整它們以適應空間,但jQuery中的某些內容會強制它們在縮略圖之間移動時從左向右輕微前進。我已經拍了一張截圖,以便你明白我的意思。 http://awesomescreenshot.com/0edr1flb7我需要屏幕截圖中的藍色框在大圖像下方保持靜止。jQuery滑塊問題:我如何刪除此效果?

的jQuery是如下:

(function (a) { 
a.fn.spiderSlider = function (b) { 
    var c = { 
     speed: 700, 
     pauseTime: 5000, 
     spiderCache: true, 
     autoPlay: true, 
     spiderTimer: true, 
     keyboardNav: true, 
     currentSlide: 0 
    }; 
    var b = a.extend(c, b); 
    this.each(function() { 
     var z = b.currentSlide, 
      v = a(this), 
      h = v.find(".button"), 
      E = h.find(".buttonCover"), 
      w = h.width(), 
      B = v.find(".slider"), 
      j = h.find(".thumb"), 
      l = v.find(".cover"), 
      f = h.find(".cache"), 
      g = f.find(".filler"), 
      s = f.width(), 
      e = l.find(".item"), 
      C = v.find(".next"), 
      A = v.find(".prev"), 
      n = v.find(".auto"), 
      o = e.length, 
      D = j.outerWidth(true), 
      t = e.width(), 
      r = e.height(), 
      y = b.speed, 
      m = b.spiderTimer, 
      q = b.spiderCache, 
      x = b.pauseTime, 
      d = b.keyboardNav, 
      p = false; 
     E.width(o * D); 
     l.width(o * t); 
     k(0); 
     if (b.autoPlay) { 
      i(true) 
     } 
     j.click(function() { 
      if (p) { 
       n.trigger("click") 
      } 
      k(j.index(this), t) 
     }); 
     n.click(function() { 
      if (!p) { 
       i(true) 
      } else { 
       u(true) 
      } 
     }); 
     C.click(function() { 
      if (p) { 
       u(true) 
      } 
      if (z < (o - 1)) { 
       k(z + 1) 
      } else { 
       k(0) 
      } 
     }); 
     A.click(function() { 
      if (p) { 
       u(true) 
      } 
      if (z < 1) { 
       k(o - 1) 
      } else { 
       k(z - 1) 
      } 
     }); 

     function i(F) { 
      if (F) { 
       a(".isPaused").stop(true, true).css("bottom", "-40px").show(); 
       a(".isPlaying").stop(true, true).animate({ 
        bottom: "0px" 
       }, function() { 
        a(".isPlaying").fadeOut(1000, function() { 
         a(".isPlaying").css("bottom", "-40px").show() 
        }) 
       }) 
      } 
      p = true; 
      n.removeClass("play").addClass("pause"); 
      if (m) { 
       g.css("width", "0px").animate({ 
        width: s 
       }, x) 
      } 
      m = window.setInterval(function() { 
       u(false); 
       if (z < (o - 1)) { 
        k(z + 1) 
       } else { 
        k(0) 
       } 
       i(false); 
       if (m) { 
        g.stop(true, true).css("width", "0px").animate({ 
         width: s 
        }, x) 
       } 
      }, x) 
     } 
     function u(F) { 
      if (F) { 
       a(".isPlaying").stop(true, true).css("bottom", "-40px").show(); 
       a(".isPaused").stop(true, true).animate({ 
        bottom: "0px" 
       }, function() { 
        a(".isPaused").fadeOut(1000, function() { 
         a(".isPaused").css("bottom", "-40px").show() 
        }) 
       }) 
      } 
      p = false; 
      if (m) { 
       g.stop(true, false).animate({ 
        width: "0px" 
       }) 
      } 
      n.removeClass("pause").addClass("play"); 
      window.clearInterval(m) 
     } 
     if (d) { 
      a(document).keyup(function (F) { 
       if (F.target.tagName.match("TEXTAREA|INPUT|SELECT")) { 
        return 
       } 
       switch (F.which) { 
       case 39: 
        C.trigger("click"); 
        break; 
       case 37: 
        A.trigger("click"); 
        break; 
       case 32: 
        n.trigger("click"); 
        break 
       } 
      }) 
     } 
     function k(F) { 
      l.stop(true, true).animate({ 
       left: -t * (F) 
      }, y); 
      a(".active", v).removeClass("active"); 
      var G = j.eq(F); 
      G.addClass("active"); 
      z = F; 
      if (q) { 
       f.stop(true, true).animate({ 
        marginLeft: D * (F) 
       }, y, function() { 
        if (-D * (F) + (w/2) > 0) { 
         E.stop(true, true).animate({ 
          left: 0 
         }, y) 
        } else { 
         if (-D * (F) - (w/2) < -(o * D)) { 
          E.stop(true, true).animate({ 
           left: -(o * D) + w 
          }, y) 
         } else { 
          E.stop(true, true).animate({ 
           left: -D * (F + 0.5) + (w/2) 
          }, y) 
         } 
        } 
       }) 
      } else { 
       f.stop(true, true).animate({ 
        marginLeft: D * (F) 
       }, y); 
       if (-D * (F) + (w/2) > 0) { 
        E.stop(true, true).animate({ 
         left: 0 
        }, y) 
       } else { 
        if (-D * (F) - (w/2) < -(o * D)) { 
         E.stop(true, true).animate({ 
          left: -(o * D) + w 
         }, y) 
        } else { 
         E.stop(true, true).animate({ 
          left: -D * (F) + (w/2) 
         }, y) 
        } 
       } 
      } 
     } 
    }) 
} 
})(jQuery); 
+0

似乎你需要刪除那些'.animate('行.. – 2011-12-30 13:44:52

+0

再次,我真的不知道jquery,所以一個特定的答案將不勝感激。 – 2011-12-30 14:49:21

回答

0

實際上,我是能夠得到一個CSS破解預期的效果。我添加了.buttonCover {left:0!important; }到jquery操縱的div,並且做了詭計!