公告 / Notice

  • 界面已全面升级(11/06)

    CSS & JS分别用SASS和Webpack编译,对资源进行了模块化处理;缓存规则使页面运行更快!

  • 移动端完成(07/22)

    做得比较随意,UI非常简便

  • 正式上线啦!(07/19)

    星博客V2.0已经正式上线,欢迎大家登录浏览!

  • 星博客V2.0启动(07/15)

    由于不满意1.0版本的UI风格,星博客V2.0今日进入开发阶段

简单的图片轮播功能实现

单纯拿切换图片来说,并非难事。做图片轮播功能的难点在于切换效果的实现。我在此实现了一个淡出淡入的切换效果,提供了设计思路,供日后有需要时参考。

给我2张图片,A.png 和 B.png。

给我一个矩形区域DIV。

我要在DIV中以层叠的方式放入A、B两张图片,那么需要DIV的 style.position = relative ,需要A、B的 style.position = absolute ,同时A、B fill了DIV 的全部空间,也就是 A { top: 0, left: 0, width: 100%, height: 100% } ,B同。

这样下来,显示出来的是B图片,因为B在A之后放置。

如何显示A呢?可以设置B的opacity为0。

为了切换A、B,我们需要来回设置A、B的opacity为0、1。

为了切换时更为优雅,我们可以用CSS3的缓动属性 transition。

HTML代码

<div class="slides">
  <a href="javascript:void(0);" data-index="0" class="slides__item" style="opacity: 0;"> 
    <img src="B.png">
  </a>
  <a href="javascript:void(0);" data-index="1" class="slides__item" style="opacity: 0;"> 
    <img src="B.png">
  </a>
</div>

JavaScript

var N = 2
var current = -1;
var elements = {};

function init() {
    $('.ad > .ad__img').each(function() {
        var key = $(this).data('index');
        elements[key] = $(this);
    })
}

function fadeInImg(key) {
    var element = elements[key];
    var prevElement = current > -1 ? elements[current] : null;
    prevElement && (prevElement.css({ opacity: 0 }));
    element.css({ opacity: 1 });
    current = key;
    setTimeout(function() {
        var nextKey = + key + 1;
        if (nextKey === N) nextKey = 0;
        fadeInImg(nextKey);
    }, 10 * 1000);
}

init(); // 设置
fadeInImg(0); // 开始切换

CSS (SCSS)

.slides {
    position: relative;
    height: 88px;
    &__item {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        padding: 4px 0;
        @include transition(opacity 3s linear);
        > img {
            width: 100%;
            height: 80px;
            border-radius: 4px;
        }
    }
}

 

注意,transition中设置的duration要小于setTimeout的duration,这里前者是3秒,后者是10秒。

发布于 2018年07月23日 12:35
阅读 21 可以 1