卡卡網(wǎng)

本文介紹一個(gè)純CSS實(shí)現(xiàn)的左右滑動(dòng)幻燈片，這個(gè)基于 CSS 的幻燈片插件具有多種質(zhì)量功能。這些可以幫助導(dǎo)航整個(gè)網(wǎng)站的頁面。

demodownload

實(shí)例介紹

幻燈片可通過鼠標(biāo)點(diǎn)擊左邊和右邊的圖標(biāo)向左向右滑動(dòng)切換，也可通過點(diǎn)擊下面的數(shù)字圖標(biāo)直接滑到對(duì)應(yīng)的內(nèi)容。

怎樣修改幻燈片內(nèi)容

可以在HTML里直接修改幻燈片的內(nèi)容，包括文字和圖片。

<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>

可以設(shè)置div的樣式，定義幻燈片的背景圖片background-image: url(2.jpg);，幻燈片文字內(nèi)容直接寫在div標(biāo)簽里。

您可能對(duì)以下文章也感興趣

• 純CSS實(shí)現(xiàn)的幻燈片/輪播效果【高級(jí)動(dòng)畫】
• 【實(shí)例】使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片

標(biāo)簽: 輪播  幻燈片