简单的鼠标触发的轮播图效果

这也是我经常做专题的时候遇到的效果，记录一下吧~

$("#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];
    });

  });