"Кто борется, может проиграть; кто не борется, уже проиграл."

создание слайд шоу слайдшоу как сделать слайд шоу показ слайдов
создание слайд шоу
как сделать слайд шоу

Слайд шоу по щелчку

Слайд Шоу

.demo input { display: none; } /* "input" позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Он позволяет задавать следующий элемент формы: переключатель (radio).
"display: none;" временно удаляет элемент из документа.
Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель.
В этом случае происходит переформатирование данных на странице с учетом вновь добавленного. элемента.*/
.demo label { transition: 3s; }/* "label" устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы например <input>
Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст.
"transition" устанавливает эффект перехода между двумя состояниями элемента */
.demo label,
.demo #vkl1:checked ~ [for="vkl1"], /* Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено».
Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> */
.demo #vkl2:checked ~ [for="vkl2"],
.demo #vkl3:checked ~ [for="vkl3"],
.demo #vkl4:checked ~ [for="vkl4"],
.demo #vkl5:checked ~ [for="vkl5"] {
position: absolute;
visibility: hidden; opacity: 0; /* "visibility" предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон.
"hidden" элемент становится полностью прозрачным.
"opacity" Определяет уровень прозрачности элемента */
}
.demo #vkl1:checked ~ [for="vkl2"],
.demo #vkl2:checked ~ [for="vkl3"],
.demo #vkl3:checked ~ [for="vkl4"],
.demo #vkl4:checked ~ [for="vkl5"],
.demo #vkl5:checked ~ [for="vkl1"] {visibility: visible; opacity: 1;} /* "visible" отображает элемент как видимый. */
#slider{height:383px;width:680px;overflow:hidden;position:relative;margin:20px auto 0;border:5px ridge rgb(204,50,255);}
.sliderTxt:hover::after{content:attr(data-title);position:absolute;padding:5px;left:39%;
top:35%;background:#9FE3FC;border:1px solid rgb(0,0,100);border-radius:5px;color:rgb(0,0,100);z-index:11;}

Слайд Шоу

<!--Слайд шоу-->
<div id="slider"> <!--Контейнер для слайдера-->
<div class="demo">
<input type="radio" name="odin" id="vkl1">
<input type="radio" name="odin" id="vkl2">
<input type="radio" name="odin" id="vkl3">
<input type="radio" name="odin" id="vkl4">
<input type="radio" name="odin" id="vkl5" checked="checked">
<label for="vkl1" class="sliderTxt" data-title="Щёлкаем мышкой">
<img src="СлайдШоу/Gentoo.jpg" alt="создание слайд шоу"></label>
<label for="vkl2" class="sliderTxt" data-title="Щёлкаем мышкой">
<img src="СлайдШоу/opensuse.png" alt="слайдшоу"></label>
<label for="vkl3" class="sliderTxt" data-title="Щёлкаем мышкой">
<img src="СлайдШоу/Redhat.png" alt="как сделать слайд шоу"></label>
<label for="vkl4" class="sliderTxt" data-title="Щёлкаем мышкой">
<img src="СлайдШоу/CentOS.png" alt="показ слайдов"></label>
<label for="vkl5" class="sliderTxt" data-title="Щёлкаем мышкой">
<img src="СлайдШоу/arch.jpg" alt="показ слайдов по щелчку"></label>
</div>
</div>
<!-- Конец слайд шоу -->

Продаются
книги

Оставить отзыв

Установи и
БУДЕШЬ СЧАСТЛИВ!

Спасибо, Господи, что взял деньгами...

Scrooge
Dollar
Ruble
Ruble
Gold