17、响应式设计中图像与排版的优化技巧

响应式设计中图像与排版的优化技巧

1. 创建全屏幻灯片展示

在网页设计中，全屏幻灯片展示能为页面增添丰富的视觉效果。以下是创建全屏幻灯片展示的具体步骤：
1. 沿用之前创建全屏背景图像时的文件，仅需对 scripts.js 文件进行修改。
2. 打开 scripts.js 文件，移除 vegas() 方法中的 src 和 fade 选项，代码如下：

$(document).ready(function(){
  $.vegas({

  })('overlay', {
    src: 'overlays/03.png'
  });
});

3. 告知 Vegas 使用幻灯片展示，在传递选项对象之前添加 'slideshow' ，代码如下：

$(document).ready(function(){
  $.vegas('slideshow', {
  })('overlay', {
    src: 'overlays/03.png'
  });
});

注意， slideshow 选项位于花括号之外。
4. 在花括号内传递幻灯片展示的选项，首先添加 delay