Как сделать Slideshow с помощью JavaScript

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>JavaScript Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="1.jpg" style="width: 100%">
<div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="2.jpg" style="width: 100%">
<div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="3.jpeg" style="width: 100%">
<div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align: center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>

<script src="script.js"></script>
</body>

</html>

CSS

* {
box-sizing: border-box
}

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

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

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

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

text {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

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

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

.fade {
-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
}

}

JS

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i,
slides = document.getElementsByClassName("mySlides"),
dots = document.getElementsByClassName("dot");

if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Как вставить аудио в блогспот

Недавно работая над своим блогом о немецком языке , столкнулся с необходимостью вставить в сообщение короткий аудиоролик. Однако штатными средствами блоггера этого сделать не удалось. После нескольких раундов поиска в интернете нашел кое-что приемлемое. Пока оставляю короткое описание процесса, потом надеюсь добавлю подробное описание и скриншоты. Итак, Загружаем аудио-ролик на гугл-диск. Копируем ссылку. Она будет выглядеть примерно так https://drive.google.com/file/d/1kT49eePKwvWba5edwVpC9a0fWxCkMAYi/view?usp=sharing Удаляем все, что после view и меняем view на prevew. Получается вот так https://drive.google.com/file/d/1kT49eePKwvWba5edwVpC9a0fWxCkMAYi/preview Берем кусок кода <iframe frameborder="0" height="80" src="XXXXXXXXXXXXXXXXXXXXXXXXX" width="500"></iframe> Вставляем в него подготовленную ссылку на гугл-диск. Получается вот так <iframe frameborder="0" height="80" src="https://drive.google....
Далее...

Как изучить Питон самостоятельно. Часть первая.

Изображение
Ну вот, я решил возобновить свои занятия по изучению программирования, неудачно прерванные в прошлом году. А чтобы получить дополнительную мотивацию, решил параллельно вести блог с описанием того, что я прошел в данный день. За основу решил (третий раз "решил", ну да ладно) взять онлайн-курс СоdeCademy, с которым собственно и закончил в прошлом году. Если будет время и силы, опишу как-нибудь свои прошлогодние приключения, а пока лишь скажу, что у них есть 7-дневный пробный период, в течение которого доступны платные опции. Вот собственно я и намереваюсь описать свой путь за эти семь дней - что успею сделать. Если вам понравится и вы решите меня продонатить на платный апгрейд для получения неограниченного доступа, то я продолжу этот проект. А теперь поехали! Итак, посмотрим что у них есть. Это стартовая страница, на которую я попал после регистрации (зарегистрировался с помощью гугл-аккаунта): после некоторого размышления я остановился на курсе, посвященном изучению программир...
Далее...

Learn JavaScript: Loops. The break Keyword

This is an exersise from a Codecademy Javascript-tutorial, that I've made today Imagine we're looking to adopt a dog. We plan to go to the shelter every day for a year and then give up. But what if we meet our dream dog on day 65? We don't want to keep going to the shelter for the next 300 days just because our original plan was to go for a whole year. In our code, when we want to stop a loop from continuing to execute even though the original stopping condition we wrote for our loop hasn't been met, we can use the keyword break. The break keyword allows programs to “break” out of the loop from within the loop's block. Let’s check out the syntax of a break keyword: for (let i = 0; i < 99; i++){   console.log('Banana.');   if (i > 3) {      break;   }; }; console.log('Orange you glad I broke out the loop!'); This is the output for the code: Banana Banana Banana Orange you glad I broke out the loop! ...
Далее...