<\/p>\n
JQuery\u3067\u81ea\u52d5\u30b9\u30e9\u30a4\u30c9\u3067\u304d\u308bJavaScript\u3067\u3059\u3002
\n3\u79d2\u9593\u653e\u7f6e\u3067\u5199\u771f\u304c\u30b9\u30e9\u30a4\u30c9\u3057\u307e\u3059\u3002
\n\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3053\u3068\u3067\u30b9\u30e9\u30a4\u30c9\u3055\u305b\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\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
\u25bcJavaScript<\/p>\n
<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.0\/jquery.min.js\"><\/script>\r\n <script>\r\n$(function(){\r\n\t\/\/\u30da\u30fc\u30b8\u30f3\u30b0\u306e\u8a2d\u5b9a\r\n\t$(\"#slide li\").each(function(){\r\n\t\t$(\"#paging\").append($(\"<li><\/li>\").attr(\"data-img\",$(\"img\",this).attr(\"src\")));\r\n\t});\r\n\t$(\"#paging li:first-child\").addClass(\"active\");\r\n\t\r\n\t\/\/\u81ea\u52d5\u30b9\u30e9\u30a4\u30c9\u306e\u5b9f\u884c\r\n\tvar timerId = setInterval(function(){\r\n\t\t$(\"#nav .next\").click();\r\n\t},1500);\r\n\r\n\t\/\/\u81ea\u52d5\u30b9\u30e9\u30a4\u30c9\u306e\u5236\u5fa1\r\n\t$(\"#slideGalley\").hover(function(){\r\n\t\t$(\"#nav\").show();\r\n\t\tclearInterval(timerId);\r\n\t},function(){\r\n\t\t$(\"#nav\").hide()\r\n\t\ttimerId = setInterval(function(){\r\n\t\t\t$(\"#nav .next\").click();\r\n\t\t},1500);\r\n\t});\r\n\r\n\t\/\/\u53f3\u77e2\u5370\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u969b\u306e\u6319\u52d5\r\n\t$(\"#nav .next\").click(function(){\r\n\t\t$(\"#slide:not(:animated)\").animate({\r\n\t\t\t\"margin-left\" : -1*$(\"#slide li\").width()\r\n\t\t},function(){\r\n\t\t\t$(\"#slide\").css(\"margin-left\",\"0\").append($(\"#slide li:first-child\"));\r\n\t\t\t$(\"#paging li.active\").removeClass(\"active\");\r\n\t\t\t$(\"#paging li[data-img='\"+$(\"#slide li:first-child img\").attr\r\n\r\n(\"src\")+\"']\").addClass(\"active\")\r\n\t\t});\r\n\t});\r\n\r\n\t\/\/\u5de6\u77e2\u5370\u30dc\u30bf\u30f3\u304c\u62bc\u3055\u308c\u305f\u969b\u306e\u6319\u52d5\r\n\t$(\"#nav .prev\").click(function(){\r\n\t\t$(\"#slide:not(:animated)\")\r\n\t\t\t.css(\"margin-left\",-1*$(\"#slide li\").width())\r\n\t\t\t.prepend($(\"#slide li:last-child\"))\r\n\t\t\t.animate({\r\n\t\t\t\"margin-left\" : 0\r\n\t\t},function(){\r\n\t\t\t$(\"#paging li.active\").removeClass(\"active\");\r\n\t\t\t$(\"#paging li[data-img='\"+$(\"#slide li:first-child img\").attr\r\n\r\n(\"src\")+\"']\").addClass(\"active\")\r\n\t\t});\r\n\t});\r\n});\r\n\t\t<\/script><\/pre>\n\u25bcCSS<\/p>\n
test@charset \"utf-8\";\r\n\/* Baselayout Style *\/\r\nul#menu{\r\n\twidth:800px;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\n*{\r\n\tmargin:0px;\r\n\tpadding:0px;\r\n\tlist-style-type:none;\r\n\t}\r\n#container{\r\n\tmargin:20px auto;\r\n\twidth:800px;\r\n}\r\nul.sub{\r\n\tdisplay:none;\r\n}\r\nul.menu:after {\r\n\theight:0;\r\n\tvisibility:hidden;\r\n\tdisplay:block;\r\n\tclear:both;\r\n}\r\n#container{\r\n\twidth:800px;\r\n\tmargin:0px auto;\r\n}\r\n#slideGalley{\r\n\twidth:800px;\r\n\tposition: relative;\r\n\toverflow:hidden;\r\n}\r\n#slide{\r\n\twidth:2400px;\r\n}\r\n#slide li{\r\n\tfloat:left;\r\n}\r\n#paging{\r\n\ttext-align: center;\r\n\tposition: absolute;\r\n\twidth:100%;\r\n\tbottom:10px;\r\n}\r\n#paging li{\r\n\tdisplay: inline-block;\r\n\t*display: inline;\r\n\t*zoom:1;\r\n\twidth:20px;\r\n\theight:20px;\r\n\tbackground: url(.\/image\/page.png);\r\n}\r\n#paging li.active{\r\n\tbackground: url(.\/image\/page_active.png);\r\n}\r\n#nav{\r\n\tdisplay: none;\r\n}\r\n#nav .prev{\r\n\tposition: absolute;\r\n\tleft:10px;\r\n\ttop:50%;\r\n\tmargin-top:-50px;\r\n}\r\n#nav .next{\r\n\tposition: absolute;\r\n\tright:10px;\r\n\ttop:50%;\r\n\tmargin-top:-50px;\r\n}\r\n\t<\/pre>\n\u25bcHTML<\/p>\n
\t<div id=\"container\">\r\n\t<div id=\"slideGalley\">\r\n\r\n\t<ul id=\"slide\">\r\n\t<li><a href=\"\/image\/a1.jpg\"><img src=\"image\/a1.jpg\" width=\"800\" \/><\/a><\/li>\r\n\t<li><a href=\"\/image\/a2.jpg\"><img src=\"image\/a2.jpg\" width=\"800\" \/><\/a><\/li>\r\n\t<li><a href=\"\/image\/a3.jpg\"><img src=\"image\/a3.jpg\" width=\"800\" \/><\/a><\/li>\r\n\t<\/ul>\r\n\t\t<div id=\"nav\"> <img src=\".\/image\/nav_prev.png\" class=\"prev\" \/> \r\n\t\t<img src=\".\/image\/nav_next.png\" class=\"next\" \/> <\/div>\r\n\t\t <ul id=\"paging\">\r\n\t <\/ul>\r\n\t <\/div>\r\n\t\u3000<\/div><\/pre>\n