|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS實現(xiàn)的左右滑動幻燈片
作者:admin 時間:2021-9-23 17:16:25 瀏覽:本文介紹一個純CSS實現(xiàn)的左右滑動幻燈片，這個基于 CSS 的幻燈片插件具有多種質(zhì)量功能。這些可以幫助導航整個網(wǎng)站的頁面。
實例介紹
幻燈片可通過鼠標點擊左邊和右邊的圖標向左向右滑動切換，也可通過點擊下面的數(shù)字圖標直接滑到對應的內(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標簽里。
您可能對以下文章也感興趣
x
