为什么我的javascript不能正常工作？

我正在使用Codepen的布局：

我已经将该代码的某些部分放入html中，但它无法正常工作。谁能告诉我为什么以及我能做些什么来修复它？我想从codepen教程中得到的只是实际的图像库效果以及“单击展开”和“折叠”按钮

下面是我的网站目前的样子（忽略拉伸的照片，我将在整理javascript后纠正）

非常感谢您的帮助！这是我的代码：

    <h2>(click on the box to expand gallery)</h2>


<div class="wrap">
  <div id="picture1" class="deck"> 
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork1.JPG">
      </a>
    </div>
  <div id="picture2" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork2.JPG">
      </a></div>
  <div id="picture3" class="deck"> 
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork3.JPG">
      </a></div>
  <div id="picture4" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork4.JPG">
      </a></div>
  <div id="picture5" class="deck">
      <img src="http://www.me14ch.leedsnewmedia.net/portfolio/gallery/newyork5.JPG">
      </a></div>
</div>


      <div id="close"><p>&laquo; collapse gallery</p></div>


  <div id="lightbox">
<div id="lightwrap">
 <div id="x"></div>
</div>

这是Javascript：

 var i, expand = false;

function reset() {
  $('.deck').css({
    'transform': 'rotate(0deg)',
    'top'      : '0px'
  });
}

//expands and contracts deck on click
$('.deck').click(function (a) {
  if (expand) {
    a.preventDefault();
    var imgSource = $(this).children().attr('href');
    $('#lightwrap').append('<img src="' + imgSource + '" id="lb-pic">');
    $('#lightbox, #lightwrap').fadeIn('slow');
  } else {
    var boxWidth = $('.deck').width();
    $('.deck').each(function (e) {
      $(this).css({
        'left': boxWidth * e * 1.1 + 'px'
      });
      expand = true;
      $('#close').show();
    });
  }
});

//close lightbox
$('#x, #lightbox').click(function(){
  $('#lightbox').fadeOut('slow');
  $('#lightwrap').hide();
  $('#lb-pic').remove();
});

//prevent event bubbling on lightbox child
$('#lightwrap').click(function(b) {
  b.stopPropagation();
});

$('#close').click(function(){
  $(this).hide();
  $('.deck').css({'left': '0px'});
  expand = false;
});

$('.deck:last-child').hover(
  //random image rotation 
  function() {
    if (expand === false) {    
      $('.deck').each(function () {
        i++;
        if (i < $('.deck').length) {
          var min = -30,
              max = 30,
              random = ~~(Math.random() * (max - min + 1)) + min;
          $(this).css({
            'transform' : 'rotate(' + random + 'deg)',
            'top'       : random + 15 + 'px'
          });
        }
      });
    }
  //straightens out deck images when clicked
  $('.deck').click(
    function (a) {
      a.preventDefault();
      reset();
    }); 
  },
  //undo image rotation when not hovered
  function () {
    i = 0;
    reset();
  }
);

var i，expand=false；
函数重置（）{
$（'.deck'）.css({
“变换”：“旋转（0度）”，
“顶部”：“0px”
});
}
//单击可展开和收缩甲板
$（'.deck'）。单击（函数（a）{
如果（展开）{
a、 预防默认值（）；
var imgSource=$（this.children（）.attr（'href'）；
$（'#lightwrap'）。附加（''）；
$（'lightbox，'lightwrap'）.fadeIn（'slow'）；
}否则{
var-boxWidth=$（'.deck'）.width（）；
$（'.deck'）。每个（函数（e）{
$（this.css）({
“左”：箱宽*e*1.1+“px”
});
expand=true；
$（“#关闭”）.show（）；
});
}
});
//关闭灯箱
$（'#x，#lightbox'）。单击（函数（）{
$（“#lightbox”）.fadeOut（'slow'）；
$（'#lightwrap'）.hide（）；
$（'#lb pic'）。删除（）；
});
//防止lightbox子级上的事件冒泡
$（“#lightwrap”）。单击（函数（b）{
b、 停止传播（）；
});
$（“#关闭”）。单击（函数（）{
$（this.hide（）；
$（'.deck'）.css（{'left'：'0px'}）；
expand=false；
});
$（'.deck:last child'）。悬停(
//随机图像旋转
函数（）{
如果（expand==false）{
$（'.deck'）。每个（函数（）{
i++；
如果（i<$（'.deck'）。长度）{
var min=-30，
最大值=30，
random=~（Math.random（）*（max-min+1））+min；
$（this.css）({
“变换”：“旋转（'+random+'deg）”，
“顶部”：随机+15+“px”
});
}
});
}
//单击时理顺甲板图像
$（'.deck'）。单击(
职能（a）{
a、 预防默认值（）；
重置（）；
}); 
},
//不悬停时撤消图像旋转
函数（）{
i=0；
重置（）；
}
);

只需将您的javascript封装在一个

$（document）.ready（）

中，即可在加载页面时执行：

$( document ).ready(function() {
  //paste javascript code here
});

结果将是：

---

这里还有一个for it

只需将您的javascript封装在一个

$（document.ready（）

中，即可在加载页面时执行：

$( document ).ready(function() {
  //paste javascript code here
});

结果将是：

---

这里还有一个for it

如果您想自己调试它，请键入

debugger要放置断点的任何位置。之后，刷新页面（不要点击任何图片），点击f12（如果在chrome上），然后点击图片。和其他程序一样进行调试（假设你知道如何调试程序）。注意，每次悬停时，每个
都会附加一个新的单击处理程序。deck
我是一个html初学者，在结束时进行验证，然后返回，为你这些网络巨魔的信心干杯@Pluto如果要自己调试，请键入
debugger要放置断点的任何位置。之后，刷新页面（不要点击任何图片），点击f12（如果在chrome上），然后点击图片。和其他程序一样进行调试（假设你知道如何调试程序）。注意，每次悬停时，每个
都会附加一个新的单击处理程序。deck
我是一个html初学者，在结束时进行验证，然后返回，为你这些网络巨魔的信心干杯@冥王星非常感谢你，一些简单但重要的事情！谢谢你的帮助性回答，阅读其他有辱人格的评论会更好。非常感谢，一些简单但重要的东西！谢谢你的帮助性回答，阅读其他有辱人格的评论会更好