制作简单的响应式幻灯片

分类：代码日期：2017-08-17

制作简单的响应式幻灯片

简介

本站介绍了很多 jQuery 幻灯片插件，它们都很优秀，且功能强大，应用在中大型页面上很合适。但如果你的页面很简单，只想要一个简单纯粹的幻灯片效果，这些插件可能略显臃肿。今天我们不用任何插件，写一个简单的响应式幻灯片。

浏览器兼容


IE10+ ✔	Edge ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

制作方法

1、HTML

<div class="dowebok">
    <img class="active" src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
</div>

以上是幻灯片主题代码，下面是导航代码：

<nav class="slider-nav">
    <ul>
        <li class="arrow">
            <a class="previous">
                <span>&lt;</span>
            </a>
        </li>
        <li class="arrow">
            <a class="next">
                <span>&gt;</span>
            </a>
        </li>
    </ul>
</nav>

2、CSS

.slider-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

.slider-nav li {
    -webkit-box-flex: 2;
    flex: 2;
    text-align: center;
    display: -webkit-box;
    display: flex;
}

img {
    max-width: 100%;
    display: none;
    -webkit-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
    -moz-box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
    box-shadow: 10px 10px 20px 0 rgba(94,47,59,0.2);
}

img.active {
    display: block;
    -webkit-animation: fadeImg 0.8s;
    -moz-animation: fadeImg 0.8s;
    animation: fadeImg 0.8s;
}

.slider-nav {
    margin-top: 20px;
}

.slider-nav .arrow {
    flex: 0 0 15%;
}

.slider-nav a {
    flex-basis: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.slider-nav span {
    padding: 5px 10px;
    font-size: 30px;
    cursor: pointer;
}

再添加淡入淡出的动画效果：

@-webkit-keyframes fadeImg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeImg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeImg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

4、JavaScript

var items = document.querySelectorAll('img');
var itemCount = items.length;
var nextItem = document.querySelector('.next');
var previousItem = document.querySelector('.previous');
var count = 0;

function showNextItem() {
    items[count].classList.remove('active');

    if (count < itemCount - 1) {
        count++;
    } else {
        count = 0;
    }

    items[count].classList.add('active');
    console.log(count);
}

function showPreviousItem() {
    items[count].classList.remove('active'); if (count > 0) {
        count--;
    } else {
        count = itemCount - 1;
    }

    items[count].classList.add('active');
    console.log(count);
}

nextItem.addEventListener('click', showNextItem);
previousItem.addEventListener('click', showPreviousItem);

到这里就制作完了，看看效果吧。

标签：幻灯片