kokeko

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » kokeko » Тесты скриптов и прочие временные штуки » тест ротатора

тест ротатора

Страница: 1

Сообщений 1 страница 9 из 9

1

  • Автор: keke
  • писечный вор
  • keke
  • Сообщений: 188
  • Уважение: [+13/-0]

[html]<b>Здесь должно что-то быть</b>
<div class="cssSlider">
<ul class="slides">
    <li id="slide1"><img src="https://images.unsplash.com/photo-1483653364400-eedcfb9f1f88?auto=format&fit=crop&w=840&q=60" alt="" /></li>
    <li id="slide2"><img src="https://images.unsplash.com/photo-1433256392503—913cee5877e3?auto=format&fit=crop&w=840&q=60" alt="" /></li>
    <li id="slide3"><img src="https://images.unsplash.com/photo-1483653085484-eb63c9f02547?auto=format&fit=crop&w=840&q=60" alt="" /></li>
    <li id="slide4"><img src="https://images.unsplash.com/photo-1480714378408—67cf0d13bc1b?auto=format&fit=crop&w=840&q=60" alt="" /></li>
    <li id="slide5"><img src="https://images.unsplash.com/photo-1453284441168—8780c9f52097?auto=format&fit=crop&w=840&q=60" alt="" /></li>
</ul>
<ul class="thumbnails">
    <li><a href="#slide1"><img src="https://images.unsplash.com/photo-1483653364400-eedcfb9f1f88?auto=format&fit=crop&w=840&q=60" /></a></li>
    <li><a href="#slide2"><img src="https://images.unsplash.com/photo-1433256392503—913cee5877e3?auto=format&fit=crop&w=840&q=60" /></a></li>
    <li><a href="#slide3"><img src="https://images.unsplash.com/photo-1483653085484-eb63c9f02547?auto=format&fit=crop&w=840&q=60" /></a></li>
    <li><a href="#slide4"><img src="https://images.unsplash.com/photo-1480714378408—67cf0d13bc1b?auto=format&fit=crop&w=840&q=60" /></a></li>
    <li><a href="#slide5"><img src="https://images.unsplash.com/photo-1453284441168—8780c9f52097?auto=format&fit=crop&w=840&q=60" /></a></li>
</ul>
</div>

<style>
.cssSlider {
display: block;
position: relative;
width: 100%;
overflow: hidden;
}
.cssSlider .slides {
overflow: hidden;
overflow: hidden;
width: 100%;
height: 70vmin;
margin: 0;
padding: 0;
list-style: none;
}
.cssSlider .slides > li {
width: 100%;
height: 70vmin;
position: absolute;
z-index: 1;
overflow: hidden;
}
.cssSlider .slides > li > img {
width: 100%;
height: auto;
}
/*
.cssSlider .slides > li:first-child:not(:target) {
z-index: 1;
-webkit-transform: translateY(0%);
        transform: translateY(0%);
}
*/
.cssSlider .thumbnails {
display: block;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.cssSlider .thumbnails > li {
float: left;
width: 20%;
}
.cssSlider .thumbnails > li > a {
display: block;
}
.cssSlider .thumbnails > li > a > img {
width: 100%;
height: auto;
}

.cssSlider .slides li:target {
z-index: 3;
-webkit-animation: slide 1s 1;
}
.cssSlider .slides li:not(:target) {
-webkit-animation: hidden 1s 1;
}
@-webkit-keyframes slide {
0% {
    -webkit-transform: translateX(—100%);
            transform: translateX(—100%);
}
100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
}
}
@keyframes slide {
0% {
    -webkit-transform: translateX(—100%);
            transform: translateX(—100%);
}
100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
}
}
@-webkit-keyframes hidden {
0% {
    z-index: 2;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
}
100% {
    z-index: 2;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
}
@keyframes hidden {
0% {
    z-index: 2;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
}
100% {
    z-index: 2;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
}
}
</style>[/html]

0

2

[html]<div class="slider">
    <div class="item">
        <img src="https://images.unsplash.com/photo-1453284441168—8780c9f52097?auto=format&fit=crop&w=840&q=60" alt="Первый слайд">
        <div class="slideText">Заголовок слайда 1</div>
    </div>

    <div class="item">
        <img src="https://images.unsplash.com/photo-1483653085484-eb63c9f02547?auto=format&fit=crop&w=840&q=60" alt="Второй слайд">
        <div class="slideText">Заголовок слайда 2</div>
    </div>

    <div class="item">
        <img src="https://images.unsplash.com/photo-1480714378408—67cf0d13bc1b?auto=format&fit=crop&w=840&q=60" alt="Третий слайд">
        <div class="slideText">Заголовок слайда 3</div>
    </div>

    <a class="prev" onclick="minusSlide()">❮</a>
    <a class="next" onclick="plusSlide()">❯</a>
</div>

<div class="slider-dots">
    <span class="slider-dots_item" onclick="currentSlide(1)"></span>
    <span class="slider-dots_item" onclick="currentSlide(2)"></span>
    <span class="slider-dots_item" onclick="currentSlide(3)"></span>
</div>

<style>
/* Собственно сам слайдер */
.slider{
    max-width: 90%;
    position: relative;
    margin: auto;
    height: 300px;
    margin-bottom: 15px;
}
/* Картинка мастабируется по отношению к родительскому элементу */
.slider .item img {
    object-fit: cover;
    width: 100%;
    height: 300px;
    border: none !important;
    box-shadow: none !important;
}
/* Кнопки вперед и назад */
.slider .prev, .slider .next {
    cursor: pointer;
    position: absolute;
    top: 0;
    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 3px 0;
}
.slider .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
/* При наведении на кнопки добавляем фон кнопок */
.slider .prev:hover,
.slider .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* Заголовок слайда */
.slideText {
    position: absolute;
    color: #fff;
    font-size: 35px;
    /* Выравнивание текста по горизонтали и по вертикали*/
    left: 50%;
    top: 50%;
    transform: translate(—50%, —50%);
    /* Тень*/
    text-shadow: 1px 1px 1px #000, 0 0 1em #000;
}
/* Кружочки */
.slider-dots {
    text-align: center;
}
.slider-dots_item{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active,
.slider-dots_item:hover {
    background-color: #aaa;
}
/* Анимация слайдов */
.slider .item {
    -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>[/html]

0

3

[html]<section>
    <ul id="gallery">
        <li id="fullPreview"></li>
        <!——  один элемент галереи ——>
            <li>
                <a href="images/p1.jpg"></a>
                <img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Фото 1" />
                <div class="overLayer"></div>
                <div class="infoLayer">
                    <ul>
                        <li>
                            <h2>Заголовок фото</h2>
                        </li>
                        <li>
                            <p>Краткое описание изображения</p>
                        </li>
                    </ul>
                </div>
                <div class="projectInfo">
                    Полное описание изображения
                </div>
            </li>
        <!——  /один элемент галереи ——>
    </ul>
</section>

<!—— jQuery libary ——>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!—— least.js JS-file ——>
<script src="js/least.min.js"></script>
<!—— Lazyload JS-file ——>
<script src="js/jquery.lazyload.js"></script>

<script>
$(document).ready(function(){
    $('#gallery').least();
});
</script>
[/html]

0

4

[html]    <div id="viewport">
        <div class="slider" style="left: 0">
            <div class="slide"><img src="https://i.pinimg.com/originals/d6/50/8c/d6508c161b3a4ee5441c632d13da04e2.jpg" alt=""></div>
            <div class="slide"><img src="http://www.fonstola.ru/large/201611/249064.jpg" alt=""></div>
            <div class="slide"><img src="./img/france-2773030_1280.jpg" alt=""></div>
            <div class="slide"><img src="./img/portrait-1462944_1280.jpg" alt=""></div>
            <div class="slide"><img src="./img/woman-1948939_1280.jpg" alt=""></div>
        </div>
    </div>

    <div id="viewSlider">
        <div class="viewSlide"></div>
        <div class="viewSlide"></div>
        <div class="viewSlide"></div>
        <div class="viewSlide"></div>
        <div class="viewSlide"></div>
    </div>

    <button class="prev" id="prev">Назад</button>
    <button class="next" id="next">Вперёд</button>

<style>
#viewport {
    width: 100vw;
    height: 450px;
    overflow: hidden;
}

.slider {
    position: relative;
    transition: 500ms;
    width: calc(100% * 5);
    height: 450px;
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
}

.slide {
    width: 100%;
    height: 450px;
}

.slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: 0;
}

#viewSlider {
    width: calc(30px * 5);
    display: flex;
    justify-content: space-between;
}

.viewSlide {
    width: 20px;
    height: 20px;
    background-color: red;
}
</style>
[/html]

0

5

yyiyiuyiyuyuiyi

0

6

/// Основные классы

0

7

///// В­­­­­НЕСИСТЕМНАЯ КЛАССИФИКАЦИЯ

http://forumupload.ru/uploads/001b/6a/63/2/900545.png

Памятка по классификации
● Если объект не подает признаков аномалии, хотя раньше ими обладал, это «Нейтрализован».
● Если объект нельзя положить в коробку и он вот-вот уничтожит мир, это, разумеется, «Аполлион».
● Если объект можно убрать в коробку, но лучше этого не делать, это, стало быть, «Архонт».

Нейтрализован
«Нейтрализованные» объекты больше не являются аномальными, они либо намеренно/случайно уничтожаются, либо деактивируются. Артефакты, что потеряли свои свойства, переносятся на складские учреждения для долгосрочного хранения неактивных аномальных объектов, не имеющих риска автономного взаимодействия. Судьбу объектов, утерявших свои аномальные свойства, решает Департамент внутренних исследований и анализа.

Аполлион
Объекты класса «Аполлион» являются аномалиями, которые или невозможно содержать, или они неминуемо нарушат условия содержания, или предполагается развитие событий по схожему сценарию. Такие аномалии обычно связаны с угрозами конца света и требуют от Фонда значительных усилий для их устранения.

Архонт
Объекты класса «Архонт» являются аномалиями, чье содержание теоретически возможно, но по каким-либо причинам их лучше не содержать. Объекты класса «Архонт» могут быть частью общепризнанной реальности, которую затруднительно полноценно поставить на содержание, или же их содержание может быть чревато отрицательными последствиями. Эти аномалии не относятся к тем, чье содержание невозможно — основная особенность класса состоит в том, что Фонд решил не ставить аномалию на содержание, хотя мог бы.

0

8

⠀

.post-content em.bbuline {
    text-decoration: none!important;
    /* font-size: 30px; */
    text-transform: uppercase;
    /* line-height: 30px; */
    letter-spacing: 8px;
}

0

9

ᅠ
а а а а а
а а
а　а
а
а

а
а а

0

Страница: 1

Вы здесь » kokeko » Тесты скриптов и прочие временные штуки » тест ротатора

Рейтинг форумов | Создать форум бесплатно