卡卡网

本文介绍一个纯CSS实现的左右滑动幻灯片，这个基于 CSS 的幻灯片插件具有多种质量功能。这些可以帮助导航整个网站的页面。

demodownload

实例介绍

幻灯片可通过鼠标点击左边和右边的图标向左向右滑动切换，也可通过点击下面的数字图标直接滑到对应的内容。

怎样修改幻灯片内容

可以在HTML里直接修改幻灯片的内容，包括文字和图片。

<div class="slider">
  <div style="background-image: url(2.jpg);">
    <h2>PURE <b>CSS</b> SLIDESHOW</h2>
    <p>Responsive Slideshow Gallery created using CSS only<br>by Roko</p>
  </div>
  <div style="background:#85b;">
    <h2>Slide 2</h2>
  </div>
  <div style="background:#e95;">
    <h2>Slide 3</h2>
  </div>
  <div style="background:#e59;">
    <h2>Slide 4</h2>
  </div>
</div>

可以设置div的样式，定义幻灯片的背景图片background-image: url(2.jpg);，幻灯片文字内容直接写在div标签里。

您可能对以下文章也感兴趣

• 纯CSS实现的幻灯片/轮播效果【高级动画】
• 【实例】使用 HTML、CSS 和 JavaScript 创建幻灯片

标签: 轮播  幻灯片