Javascript-форум - Показать сообщение отдельно

рони · #3 (**permalink**) 25.02.2018, 18:50

K_Artem,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slideshow</title>

    <style type="text/css">
    .slideshow-container{
      max-width:1000px;
      position:relative;
      margin:auto;
    }

    .prev,.next{
      cursor:pointer;
      position:absolute;
      top:50%;
      width:auto;
      margin-top:-22px;
      padding:16px;
      color:#fff;
      font-weight:bold;
      font-size:18px;
      transition:0.6s ease;
      border-radius:0 3px 3px 0;
    }

    .next{
      right:0;
      border-radius:3px 0 0 3px;
    }

    .prev:hover,.next:hover{
      background:rgba(0,0,0,0.8);
    }

    .myDots{
      padding:8px 12px;
      text-align:center;
      position:absolute;
      left:0;
      right:0;
      bottom:0;
    }

    .dot{
      cursor:pointer;
      height:13px;
      width:13px;
      margin:0 2px;
      background:#bbb;
      border-radius:50%;
      display:inline-block;
      transition:background-color 0.6s ease;
    }

    .dot.active{
      background:#777;
    }

    .active,.dot:hover{
      background:#717171;
    }

    .fade{
      display:none;
      -webkit-animation-name:fade;
      -webkit-animation-duration:1.5s;
      animation-name:fade;
      animation-duration:1.5s;
    }

    @-webkit-keyframes fade{
      from{
        opacity:.4;
      }

      to{
        opacity:1;
      }
    }

    @keyframes fade{
      from{
        opacity:.4;
      }

      to{
        opacity:1;
      }
    }
    </style>
</head>
<body>
	<div class="slideshow-container" onmouseenter="clearAuto()" onmouseleave="auto()">
		<div class="mySlides fade">
			<img src="https://d28g7970w5bq8z.cloudfront.net/p/galleries/2015/gi-13899-66017-big.jpg" style="width: 100%">
		</div>
		<div class="mySlides fade">
			<img src="https://www.look.com.ua/large/201508/126047.jpg" style="width: 100%">
		</div>
		<div class="mySlides fade">
			<img src="https://avatars.mds.yandex.net/get-pdb/234183/bb8a3c91-b715-44cf-8ce0-adfc5ca5ea48/s1200?webp=false" style="width: 100%">
		</div>
		<div class="mySlides fade">
			<img src="https://avatars.mds.yandex.net/get-pdb/33827/cc016818-1eda-4b5f-921b-4c64b219e293/s1200?webp=false" style="width: 100%">
		</div>
		<a class="prev" onclick="plusSlides(-1)">&#10094</a>
		<a class="next" onclick="plusSlides(1)">&#10095</a>
        <div class="myDots">
				<span class="dot" onclick="currentSlide(0)"></span>
				<span class="dot" onclick="currentSlide(1)"></span>
				<span class="dot" onclick="currentSlide(2)"></span>
				<span class="dot" onclick="currentSlide(3)"></span>
	    </div>
	</div>
	<br>

<script>
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var slideIndex = 0;
var timer;
showSlides(slideIndex);
function auto() {
  window.clearTimeout(timer);
  timer = setTimeout(function() {
    plusSlides(1);
    auto();
  }, 7500);
}
auto();
function clearAuto() {
  window.clearTimeout(timer);
}
function plusSlides(n) {
  showSlides(slideIndex + n);
}
function currentSlide(n) {
  showSlides(n);
}
function limit(n) {
  return n >= slides.length ? 0 : n < 0 ? slides.length - 1 : n;
}
function showSlides(n) {
  n = limit(n);
  slides[slideIndex].style.display = "none";
  dots[slideIndex].classList.remove("active");
  slideIndex = n;
  slides[slideIndex].style.display = "block";
  dots[slideIndex].classList.add("active");
}
</script>
</body>
</html>