【第22期】观点:IT 行业加班,到底有没有价值?

纯css实现轮播效果

转载 2016年08月30日 15:22:00

转载自: http://blog.csdn.net/rtian001/article/details/48474677#comments

改动了一部分 方便自己以后使用

<!DOCTYPE html>
<html>
<head>
    <title> 纯CSS代码实现图片轮播 </title>
    <meta charset="utf-8" />
    <style type="text/css">
        #frame {/*----------图片轮播相框容器----------*/
            position:absolute;width:300px; height:200px;overflow:hidden;border-radius:5px;}
        #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
            position:absolute;z-index:9;width:calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/}
        #photos img {
            float:left;width:300px;height:200px;}
        .play{
            animation:ma 20s ease-out infinite alternate;/**/  }
        @keyframes ma {/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/
            0%,20% {margin-left:0; } 25%,40% {margin-left:-300px;} 45%,60% {margin-left:-600px;}
            65%,80% {margin-left:-900px;} 85%,100% {margin-left:-1200px;} }
        .num{
            position:absolute;z-index:10;display:inline-block;right:10px;top:165px;border-radius:100%;
            background:#f00;width:25px;height:25px;line-height:25px;cursor:pointer;color:#fff;
            text-align:center;opacity:0.8;}
        .num:hover{background:#00f;}
        .num:hover,#photos:hover{animation-play-state:paused;}
        .num:nth-child(4){margin-right:30px}
        .num:nth-child(3){margin-right:60px}
        .num:nth-child(2){margin-right:90px}
        .num:nth-child(1){margin-right:120px}
        #a1:hover ~ #photos{animation:ma1 .5s ease-out forwards;}
        #a2:hover ~ #photos{animation:ma2 .5s ease-out forwards;}
        #a3:hover ~ #photos{animation:ma3 .5s ease-out forwards;}
        #a4:hover ~ #photos{animation:ma4 .5s ease-out forwards;}
        #a5:hover ~ #photos {animation:ma5 .5s ease-out forwards;}
        @keyframes ma1 {0%{margin-left:-1200px;}100%{margin-left:0;} }
        @keyframes ma2 {0%{margin-left:0;}100%{margin-left:-300px;}   }
        @keyframes ma3 {0%{margin-left:-300px;}100%{margin-left:-600px;}   }
        @keyframes ma4 {0%{margin-left:-600px;}100%{margin-left:-900px;}   }
        @keyframes ma5 {0%{margin-left:-900px;}100%{margin-left:-1200px;}  }
    </style>
</head>
<body>
<div id="frame" >
    <a id="a1" class="num">1</a>
    <a id="a2" class="num">2</a>
    <a id="a3" class="num">3</a>
    <a id="a4" class="num">4</a>
    <a id="a5" class="num">5</a>
    <div id="photos" class="play">
        <img src="http://eduppp.cn/images/0/1.jpg" >
        <img src="http://eduppp.cn/images/0/3.jpg" >
        <img src="http://eduppp.cn/images/0/4.jpg" >
        <img src="http://eduppp.cn/images/0/5.jpg" >
        <img src="http://eduppp.cn/images/0/2.jpg" >
    </div>
</div>
</body>
</html>
举报

相关文章推荐

+【CSS3】使用纯css代码实现图片轮播效果

使用纯CSS3代码实现简单的图片轮播。 1.基本布局: 将5张图片左浮动横向并排放入一个div容器(#photos)内,图片设置统一尺寸,div宽度设置5个图片的总尺寸,然后放入相框容器div(#f...

纯CSS实现图片轮播

原文:http://www.aichengxu.com/view/4182590 关键点:利用keyframes 原理:infinite 注意点:在处理关键帧动画的时候,注意处理好 总共花...

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

纯css3实现图片轮播

用css3的动画可以实现图片轮播无非就是两种类型:  左右滚动类型, 渐变类型1 左右滚动 定义一个大盒子 在一个小盒子里面 装3张图片(这里用3张图片为例子) 三张图片可以向左浮动,大盒子 ...

纯CSS3制作轮播图

需求如下:三张轮播图轮播效果:实现每 5s 切换图片,图片循环播放;鼠标悬停某张图片, 则暂停切换;切换效果使用入场图片 500ms 淡入的方式 依照需求我们选择用CSS3的animat...

纯CSS制作的类轮播简历

啦啦啦啦~就是向用不一样的方法来制作轮播,来自一直爱折腾的成长中的前端_(:зゝ∠)_

(自学收获)纯css网页小部件--轮播图效果

今天是个悲伤的日子,由于我对css3标签理解的不深刻,所以直到现在只能写一篇留有遗憾的收获小博客(ps:已经抓掉了好几根头发)         轮播图效果我是用overflow这个“框”,加上css3...

html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法,只是自己做了一些改进 先来贴一发代码 ...

HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告,简单好用,加上效果也很好看。 实现的效果: 5张图片每两秒轮播一次,右下角的数字随图片而变换,鼠标放在数字上图片停止,移走鼠标继续播放。 ...
  • as00v1
  • as00v1
  • 2016-08-05 17:05
  • 3217

浅谈纯CSS实现轮播

.box{ position:absolute; width:20px; height:20px; background:grey; color:white; ...

css 如何让图片全屏的问题

css 如何让图片全屏的问题 例如我有一张1024*768的图片,能否让它在页面上显示全屏,无论电脑分辨率是1024*768还是1440*900,我都想让这张图片全屏,如何实现? 1、如果楼主只是将...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)