簡單的鼠標觸發的輪播圖效果

這也是我經常做專題的時候遇到的效果，記錄一下吧~

$("#id_ul li").on('mouseenter', function() {

    $(this).find(".class_Box").show();
    $(this).siblings().find(".class_Box").hide();
    $(this).siblings().css({'margin': '0 0'});

    //爲了兼容IE7,需要把當前的元素提高層次
    $(this).css('z-index','2').siblings().css('z-index', '1');

    var i = $(this).index();
    var arr = [
      "0 662px 0 0",
      "0 331px 0 331px",
      "0 0 0 662px"
    ]

    $(this).css('margin', function() {
      return arr[i];
    });

  });