幻燈片の純CSS,NO JavaScript

之前就遇到有人问,不用js,纯css实现幻灯片。

那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟。

方案一:利用css3的animation

例子传送门点我,点我!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>幻灯片</title>
    <style>
        .ani {
            width: 440px;
            height: 440px;
            margin: 50px auto;
            overflow: hidden;
            box-shadow: 0 0 5px rgba(0, 0, 0, 1);
            background-size: cover;
            background-position: center;
            -webkit-animation-name: loops;
            -webkit-animation-duration: 20s;
            -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes loops {
            0% {
                background: url(../images/01.jpg) no-repeat;
            }
            25% {
                background: url(../images/02.jpg) no-repeat;
            }
            50% {
                background: url(../images/03.jpeg) no-repeat;
            }
            75% {
                background: url(../images/04.jpg) no-repeat;
            }
            100% {
                background: url(../images/05.jpg) no-repeat;
            }
        }
    </style>
</head>
<body>
<div class="ani"></div>
</body>
</html>

 

方案二:把需要展示的图片集合并长一个长横图,然后再通过:hover伪类来改变图片的位置,从而达到幻灯片的效果

例子传送门还是点我吧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #wrap {
            width: 580px;
            height: 440px;
            background: #9ed2d9;
            border: 5px solid #9ed2d9;
            position: relative;
            margin: 30px auto 20px auto;
            -o-border-radius: 20px;
            -icab-border-radius: 20px;
            -khtml-border-radius: 20px;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
            border-radius: 20px;
        }
        #slide {
            padding: 370px 0 0 0;
            margin: 0;
            list-style: none;
            width: 480px;
            height: 30px;
            overflow: hidden;
            position: absolute;
            left: 48px;
            top: 29px;
        }
        #slide b {
            float: left;
        }
        #slide span {
            position: absolute;
            left: 0;
            top: 0;
            height: 360px;
            width: 480px;
            border: 1px solid #698639;
            border-color: #698639 #e0ebcb #e0ebcb #698639;
        }
        #slide b.overlay {
            display: block;
            width: 490px;
            height: 370px;
            background: transparent;
            position: absolute;
            top: -5px;
            left: -5px;
        }
        #slide i {
            display: block;
            float: left;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            color: #;
            line-height: 19px;
            font-family: arial, sans-serif;
            font-style: normal;
            font-size: 11px;
            text-align: center;
            cursor: pointer;
        }
        #slide b img {
            display: block;
            border: 0;
            position: absolute;
            top: 0;
            left: -1px;
            -webkit-transition: all 0.7s ease-in-out;
        }
        #slide i:hover {
            background-position: 0 -20px;
            color: #fff;
        }
        #slide .p1:hover img {
            left: -1px;
        }
        #slide .p2:hover img {
            left: -481px;
        }
        #slide .p3:hover img {
            left: -961px;
        }
        #slide .p4:hover img {
            left: -1441px;
        }
        #slide .p5:hover img {
            left: -1921px;
        }
        #slide .p6:hover img {
            left: -2401px;
        }
        #slide .p7:hover img {
            left: -2881px;
        }
        #slide .p8:hover img {
            left: -3361px;
        }
        #slide .p9:hover img {
            left: -3841px;
        }
        #slide .p10:hover img {
            left: -4321px;
        }
    </style>

</head>
<body>
<div id="wrap">
    <div id="slide">
        <b class="p1"><i>1</i>
            <b class="p2"><i>2</i>
                <b class="p3"><i>3</i>
                    <b class="p4"><i>4</i>
                        <b class="p5"><i>5</i>
                            <b class="p6"><i>6</i>
                                <b class="p7"><i>7</i>
                                    <b class="p8"><i>8</i>
                                        <b class="p9"><i>9</i>
                                            <b class="p10"><i>10</i><span><img src="../images/long.jpg" alt="" /></span></b>
                                        </b>
                                    </b>
                                </b>
                            </b>
                        </b>
                    </b>
                </b>
            </b>
        </b>
        <b class="overlay"></b>
    </div> <!-- end slide -->
</div>

</body>
</html>

 

方案三:利用描点。通过点击描点来选择图片,达到幻灯片的效果。

我没有传送门,你们抢吧。

更多相关文章
  • 使用Javascript來創建一個回應式的超酷360度全景圖片查看幻燈效果
    360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实现,相信大家一定会喜欢的! 在这个教程中没有使用到任何插件,我们将使用HTML,css和javasc ...
  • 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高
  • 方案一: 把所有的css样式和javascript函数放到母版页的<head></head>中,我觉得这样做的弊端就是导致母版页的<head></head>区特别臃肿,同时如果原来两个频道页中包含同名的css声明或javascript函数,但却是不同样 ...
  • 


    		    HTML元素屬性測試總結,包含DOM,CSS,javascript 與 AJAX
    HTML元素属性测试总结,包含DOM,CSS,javascript 与 AJAX 准备工作:使用firebug插件支持的console.log()方法(函数)来动态调试HTML文档中的javascript代码. 1.比较console.log() 与 document.write() 在调试时的功能
  • 新手程序員隨筆2——初識html、css和javascript
          翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写blog,拖延心理大获全胜.       现在正值放假,刚好有时间总结一下这段时间来的工
  • CSS 和 JavaScript 标签 style 属性对照表:盒子标签和属性对照颜色和背景标签和属性对照样式标签和属性对照文字样式标签和属性对照文本标签和属性对照   CSS语法(不区分大小写) JavaScrip
  • Because we're always on the look out for ways to speed up our web application, one of my favorite tools for optimization is the YSlow Firefox extensio ...
  • Notepad++ 配置 支持jquery.html.css.javascript.php代码提示 分类: 工具应用2012-01-02 10:29 13537人阅读 评论(2) 收藏  jqueryjavascriptcsshtmlphpplugins   官网下载:http://notepad-
一周排行