{"id":19014,"date":"2022-02-06T00:32:15","date_gmt":"2022-02-05T15:32:15","guid":{"rendered":"https:\/\/dubdesign.net\/?p=19014"},"modified":"2022-03-21T22:10:32","modified_gmt":"2022-03-21T13:10:32","slug":"style-display-carousel","status":"publish","type":"post","link":"https:\/\/dubdesign.net\/javascript\/style-display-carousel\/","title":{"rendered":"JavaScript\u306estyle.display\u3067\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u3063\u307d\u3044\u30ab\u30eb\u30fc\u30bb\u30eb"},"content":{"rendered":"\n<p>JavaScript\u306e<meta charset=\"utf-8\"><code>style.display<\/code> \u3067\u300cdisplay:block\u300d\u3068<meta charset=\"utf-8\">\u300cdisplay:none\u300d\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5207\u308a\u66ff\u3048\u3092\u884c\u3063\u305f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u3088\u3046\u306a\u30ab\u30eb\u30fc\u30bb\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">\u76ee\u6b21<\/p><ul class=\"toc_list\"><li><a href=\"#styledisplay\">style.display<\/a><\/li><li><a href=\"#styledisplay-2\">style.display\u3067\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b5\u30f3\u30d7\u30eb<\/a><\/li><li><a href=\"#i\">\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/a><ul><li><a href=\"#CSS\">CSS<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h2><span id=\"styledisplay\">style.display<\/span><\/h2>\n\n\n\n<p>JavaScript\u306e <code>style.display<\/code> \u306f\u3001\u8981\u7d20\u306edisplay\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u53d6\u5f97\u30fb\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>element.style.display = \"block\"; \/\/\"block\"\u3067\u8868\u793a\nelement.style.display = \"none\"; \/\/\"none\"\u3067\u975e\u8868\u793a<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-sgb-say sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2020\/04\/face2.svg\" alt=\"\u304b\u304b\u304b\u305a\" style=\"border-color:#eaedf2\"\/><div class=\"sgb-block-say-avatar__name\">\u304b\u304b\u304b\u305a<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p>jQuery\u3067\u540c\u3058\u5185\u5bb9\u306e\u8a18\u8ff0\u306f <code>$(\u30bf\u30b0\u3084\u30af\u30e9\u30b9\u540d).css('display', 'none');<\/code> \u306e\u3088\u3046\u306b\u3057\u3066\u66f8\u304d\u307e\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div>\n\n\n\n<p>\u5358\u72ec\u3067\u306f\u3042\u307e\u308a\u4f7f\u3046\u3053\u3068\u304c\u306a\u3044\u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u3001\u500b\u4eba\u7684\u306b\u306f\u30af\u30ea\u30c3\u30af\u7cfb\u30a4\u30d9\u30f3\u30c8\u3068 <code>.classList.toggle()<\/code> \u306e\u30e1\u30bd\u30c3\u30c9\u3068\u4f75\u7528\u3057\u3066\u4f7f\u3046\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<h2><span id=\"styledisplay-2\">style.display\u3067\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b5\u30f3\u30d7\u30eb<\/span><\/h2>\n\n\n\n<p>\u65e9\u901f\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u5de6\u53f3\u306e\u77e2\u5370\u304b\u3001\u4e0b\u90e8\u306e\u9032\u6357\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u30fc\u306e\u3069\u3063\u3061\u304b\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<section class=\"javaSample\">\n<div class=\"jsSlider_container\">\n  <div class=\"jsSlides fade\">\n    <div class=\"jsSlider_numbertext\">1 \/ 3<\/div>\n    <img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2022\/01\/pagereload.jpg\">\n  <\/div>\n\n  <div class=\"jsSlides fade\">\n    <div class=\"jsSlider_numbertext\">2 \/ 3<\/div>\n    <img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2021\/12\/java006.jpg\">\n  <\/div>\n\n  <div class=\"jsSlides fade\">\n    <div class=\"jsSlider_numbertext\">3 \/ 3<\/div>\n    <img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2021\/12\/java001.jpg\">\n  <\/div>\n\n  <a class=\"prev\" onclick=\"plusSlides(-1)\">\u276e<\/a>\n  <a class=\"next\" onclick=\"plusSlides(1)\">\u276f<\/a>\n<\/div>\n<div class=\"jsSlider_dots\" style=\"text-align:center\">\n  <span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(1)\"><\/span> \n  <span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(2)\"><\/span> \n  <span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(3)\"><\/span> \n<\/div>\n<\/section>\n\n\n\n<script>\nvar slideIndex = 1;\nshowSlides(slideIndex);\n\nfunction plusSlides(n) {\n  showSlides(slideIndex += n);\n}\n\nfunction currentSlide(n) {\n  showSlides(slideIndex = n);\n}\n\nfunction showSlides(n) {\n  var i;\n  var slides = document.getElementsByClassName(\"jsSlides\");\n  var dots = document.getElementsByClassName(\"jsSlider_dots--dot\");\n  if (n > slides.length) {\n    slideIndex = 1\n  }\n  if (n < 1) {\n    slideIndex = slides.length\n  }\n  for (i = 0; i < slides.length; i++) {\n    slides[i].style.display = \"none\";\n  }\n  for (i = 0; i < dots.length; i++) {\n    dots[i].className = dots[i].className.replace(\" active\", \"\");\n  }\n  slides[slideIndex - 1].style.display = \"block\";\n  dots[slideIndex - 1].className += \" active\";\n}\n<\/script>\n\n\n\n<div class=\"wp-block-sgb-say sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2020\/04\/face2.svg\" alt=\"\u304b\u304b\u304b\u305a\" style=\"border-color:#eaedf2\"\/><div class=\"sgb-block-say-avatar__name\">\u304b\u304b\u304b\u305a<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p>\u5207\u308a\u66ff\u3048\u6642\u306b\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u3059\u308b\u30ae\u30e3\u30e9\u30ea\u30fc\u3063\u307d\u3044\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div>\n\n\n\n<h2><span id=\"i\">\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/span><\/h2>\n\n\n\n<p>HTML\u306f\u3001\u300cjsSlider_container \uff1e jsSlides\u300d\u3067\u30ab\u30eb\u30fc\u30bb\u30eb\u306e\u30b3\u30f3\u30c6\u30ca\u3092\u4f5c\u308a\u3001\u8981\u7d20\u3092\u5207\u308a\u66ff\u3048\u308b\u5de6\u53f3\u306e\u30da\u30fc\u30b8\u9001\u308a\u306f <code>a<\/code> \u30bf\u30b0\u3002\u305d\u3057\u3066\u3001\u4e0b\u90e8\u306e\u9032\u6357\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u30fc\u306f\u300cjsSlider_dots\u300d\u306e\u30af\u30e9\u30a4\u540d\u304c\u3064\u3044\u305f <code>div<\/code> \u30bf\u30b0\u3067\u3067\u3067\u304d\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>&lt;div class=\"jsSlider_container\"&gt;\n  &lt;div class=\"jsSlides fade\"&gt;\n    &lt;div class=\"jsSlider_numbertext\"&gt;1 \/ 3&lt;\/div&gt;\n    &lt;img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2022\/01\/pagereload.jpg\"&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"jsSlides fade\"&gt;\n    &lt;div class=\"jsSlider_numbertext\"&gt;2 \/ 3&lt;\/div&gt;\n    &lt;img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2021\/12\/java006.jpg\"&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"jsSlides fade\"&gt;\n    &lt;div class=\"jsSlider_numbertext\"&gt;3 \/ 3&lt;\/div&gt;\n    &lt;img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2021\/12\/java001.jpg\"&gt;\n  &lt;\/div&gt;\n\n  &lt;a class=\"prev\" onclick=\"plusSlides(-1)\"&gt;&amp;#10094;&lt;\/a&gt;\n  &lt;a class=\"next\" onclick=\"plusSlides(1)\"&gt;&amp;#10095;&lt;\/a&gt;\n&lt;\/div&gt;\n&lt;div class=\"jsSlider_dots\" style=\"text-align:center\"&gt;\n  &lt;span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(1)\"&gt;&lt;\/span&gt; \n  &lt;span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(2)\"&gt;&lt;\/span&gt; \n  &lt;span class=\"jsSlider_dots--dot\" onclick=\"currentSlide(3)\"&gt;&lt;\/span&gt; \n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-sgb-say sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2020\/04\/face2.svg\" alt=\"\u304b\u304b\u304b\u305a\" style=\"border-color:#eaedf2\"\/><div class=\"sgb-block-say-avatar__name\">\u304b\u304b\u304b\u305a<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p>\u8a18\u8ff0\u91cf\u304c\u6bd4\u8f03\u7684\u591a\u3044\u3067\u3059\u304c\u3001\u30b3\u30f3\u30c6\u30ca\u306e\u4f5c\u308a\u306f\u4e0a\u8a18\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div>\n\n\n\n<p>JavaScript\u306f\u3001<code>slideIndex<\/code> \u306e\u6570\u3067\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u64cd\u4f5c\u3057\u3066\u8868\u793a\u30fb\u975e\u8868\u793a\u306e\u5207\u308a\u66ff\u3048\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>var slideIndex = 1;\nshowSlides(slideIndex);\n\nfunction plusSlides(n) {\n  showSlides(slideIndex += n);\n}\n\nfunction currentSlide(n) {\n  showSlides(slideIndex = n);\n}\n\nfunction showSlides(n) {\n  var i;\n  var slides = document.getElementsByClassName(\"jsSlides\");\n  var dots = document.getElementsByClassName(\"jsSlider_dots--dot\");\n  if (n &gt; slides.length) {\n    slideIndex = 1\n  }\n  if (n &lt; 1) {\n    slideIndex = slides.length\n  }\n  for (i = 0; i &lt; slides.length; i++) {\n    slides[i].style.display = \"none\";\n  }\n  for (i = 0; i &lt; dots.length; i++) {\n    dots[i].className = dots[i].className.replace(\" active\", \"\");\n  }\n  slides[slideIndex - 1].style.display = \"block\";\n  dots[slideIndex - 1].className += \" active\";\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3><span id=\"CSS\">CSS<\/span><\/h3>\n\n\n\n<p>JavaScript\u3067\u8868\u793a\u30fb\u975e\u8868\u793a\u3092\u5207\u308a\u66ff\u3048\u308b\u306e\u3067\u3001CSS\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n<p>\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u30fb\u30d5\u30a7\u30fc\u30c9\u30a2\u30a6\u30c8\u306f\u3001<code>keyframes<\/code>\u300cfade\u300d\u3068\u3044\u3046\u540d\u524d\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>\/* jsSlider *\/\n.jsSlider_container {\n  max-width: 100%;\n  position: relative;\n  margin: 0 auto 5px;\n  height: 400px;\n}\n.jsSlider_container .jsSlides img {\n  object-fit: cover;\n  width: 100%;\n  height: 400px;\n}\n\n\/* \u30da\u30fc\u30b8\u9001\u308a *\/\n.prev,\n.next {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  top: 50%;\n  width: auto;\n  padding: 10px 16px;\n  color: white;\n  font-weight: bold;\n  font-size: 18px;\n  transition: 0.6s ease;\n  transform: translateY(-50%);\n}\n\n.next {\n  right: 0;\n}\n\n.prev:hover,\n.next:hover {\n  background-color: rgba(0, 0, 0, 0.8);\n  text-decoration: none;\n}\n\n\/* \u30c6\u30ad\u30b9\u30c8 *\/\n\n.jsSlider_numbertext {\n    color: #FFF;\n    font-size: 0.9rem;\n    padding: 3px 12px;\n    position: absolute;\n    top: 0;\n    background: rgb(0,0,0,.6);\n    font-weight: 500;\n    right: 0;\n}\n\n\/* \u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u30fc *\/\n.jsSlider_dots {\n  text-align: center;\n}\n.jsSlider_dots--dot {\n    cursor: pointer;\n    height: 18px;\n    width: 18px;\n    margin: 0 3px;\n    background-color: #bbb;\n    border-radius: 50%;\n    display: inline-block;\n    transition: background-color 0.6s ease;\n}\n\n.active,\n.jsSlider_dots--dot:hover {\n  background-color: #f0db3f;\n}\n\n\/* fade\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.fade {\n  animation-name: fade;\n  animation-duration: 1.2s;\n}\n\n@keyframes fade {\n  from {\n    opacity: 0.4;\n  }\n  to {\n    opacity: 1;\n  }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-sgb-headings sgb-heading\"><div class=\"sgb-heading__inner sgb-heading--type1 with-icon\" style=\"background-color:transparent;border-color:transparent;font-size:1.2em\"><i class=\"fas fa-book\" style=\"color:#f0db40\"><\/i><span class=\"sgb-heading__text\" style=\"color:#333\">\u53c2\u8003\u306b\u3057\u305f\u30b5\u30a4\u30c8<\/span><\/div><\/p>\n\n\n  <a class=\"reference table\" href=\"https:\/\/www.fixes.pub\/program\/461359.html\"  rel=\"noopener noreferrer\">\n    <span class=\"tbcell refttl\">\u53c2\u8003<\/span>\n    <span class=\"tbcell refcite\">\u81ea\u52d5\u7684\u306b\u30b9\u30e9\u30a4\u30c9\u3059\u308bJavaScript\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u4f5c\u308a\u65b9<span>FIXES.PUB<\/span><\/span>\n  <\/a>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript\u306estyle.display \u3067\u300cdisplay:block\u300d\u3068\u300cdisplay:none\u300d\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5207\u308a\u66ff\u3048\u3092\u884c\u3063\u305f\u3001\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u3088\u3046\u306a\u30ab\u30eb\u30fc\u30bb\u30eb\u3067\u3059\u3002 \u76ee\u6b21style.displaysty &#8230; <\/p>\n","protected":false},"author":1,"featured_media":22075,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-javascript.php","format":"standard","meta":[],"categories":[131],"tags":[65,48,137],"acf":[],"_links":{"self":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/19014"}],"collection":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/comments?post=19014"}],"version-history":[{"count":109,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/19014\/revisions"}],"predecessor-version":[{"id":22077,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/19014\/revisions\/22077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/media\/22075"}],"wp:attachment":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/media?parent=19014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/categories?post=19014"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/tags?post=19014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}