<\/p>\n
\u5dfb\u304d\u7269\u98a8\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3092jQuery\u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n
\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b9\u30e9\u30a4\u30c9\u3057\u307e\u3059\u3002<\/p>\n
<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
<script>\r\n$(function () {\r\n\tvar num = 0,\r\n\t\tbeforeNum = 0,\r\n\t\thantei = true,\r\n\t\timgLength = $(\"dd:not('.bottom')\").length;\r\n\r\n\t$(\"dd:not('.bottom')\").css(\"display\", \"none\");\r\n\r\n\t$(\"dt\").click(function () {\r\n\t\tif (hantei) {\r\n\t\t\thantei = false;\r\n\t\t\t$(\"dd:not('.bottom')\").slideUp(750);\r\n\t\t\tif ($(\"dd:eq(\" + beforeNum + \")\").css(\"display\") === \"none\") {\r\n\t\t\t\tif (num < imgLength) {\r\n\t\t\t\t\t$(\"dd:eq(\" + num + \")\").slideDown(750, function () {\r\n\t\t\t\t\t\thantei = true;\r\n\t\t\t\t\t});\r\n\t\t\t\t} else {\r\n\t\t\t\t\tnum = 0;\r\n\t\t\t\t\t$(\"dd:eq(\" + num + \")\").slideDown(750, function () {\r\n\t\t\t\t\t\thantei = true;\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\thantei = true;\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t\tbeforeNum = num;\r\n\t\t\tnum++;\r\n\t\t} else {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t})\r\n});\r\n<\/script><\/pre>\n<style>\r\n\t\t* {\r\n\t\t\tmargin: 0;\r\n\t\t\tpadding: 0;\r\n\t\t\tborder: 0;\r\n\t\t}\r\n\r\n\t\t#main {\r\n\t\t\tposition: relative;\r\n\t\t\twidth: 960px;\r\n\t\t\theight: 500px;\r\n\t\t\tborder: 1px solid #000;\r\n\t\t\tmargin: 0 auto;\r\n\t\t\toverflow: hidden;\r\n\t\t}\r\n\r\n\t\tdt {\r\n\t\t\twidth: 480px;\r\n\t\t\theight: 97px;\r\n\t\t\tbackground-image: url(image\/top.jpg);\r\n\t\t\tbackground-repeat: no-repeat;\r\n\t\t\tbackground-size: contain;\r\n\t\t}\r\n\r\n\t\tdd {\r\n\t\t\twidth: 415px;\r\n\t\t\theight: 311px;\r\n\t\t\tpadding: 15px 50px 15px 15px;\r\n\t\t\tbackground-image: url(image\/middle.jpg);\r\n\t\t\tbackground-repeat: no-repeat;\r\n\t\t\tbackground-size: cover;\r\n\t\t}\r\n\r\n\t\tdd img {\r\n\t\t\twidth: 100%;\r\n\t\t\theight: auto;\r\n\t\t}\r\n\r\n\t\tdd.bottom {\r\n\t\t\twidth: 415px;\r\n\t\t\theight: 56px;\r\n\t\t\tpadding: 0 50px 0 15px;\r\n\t\t\tbackground-image: url(image\/bottom.jpg);\r\n\t\t\tbackground-repeat: no-repeat;\r\n\t\t\tbackground-size: cover;\r\n\t\t}\r\n<\/style><\/pre>\n<<div id=\"main\">\r\n\t\t<dl>\r\n\t\t\t<dt><\/dt>\r\n\t\t\t<dd><img src=\"image\/topimg1.jpg\"><\/dd>\r\n\t\t\t<dd><img src=\"image\/topimg2.jpg\"><\/dd>\r\n\t\t\t<dd><img src=\"image\/topimg3.jpg\"><\/dd>\r\n\t\t\t<dd><img src=\"image\/topimg4.jpg\"><\/dd>\r\n\t\t\t<dd><img src=\"image\/topimg5.jpg\"><\/dd>\r\n\t\t\t<dd class=\"bottom\"><\/dd>\r\n\t\t<\/dl>\r\n<\/div><\/pre>\n