技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS实现的左右滑动幻灯片

作者:admin    时间:2021-9-23 17:16:25    浏览:

本文介绍一个纯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标签里。

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

标签: 轮播  幻灯片  
  • IT热文
  • 站长推荐