地牢围攻站  通行证:  密码:  免费注册 找回密码
2018年9月19日 星期三
邱少悟行网
注册会员:9336人,欢迎您:游客(M=0) ^_^ 
纯CSS多图轮播html网页(mmxhero),电脑网络,邱少时空站
第1楼

英雄无敌 48 级
    4989
 
5040    

211.102.216.190
2018-01-04 17:40
  【分享】纯CSS多图轮播html网页
关闭

 自定义轮播图大小(基本核心参数是1600,可根据自己需要改写)

<html>  
      <style type="text/css">  
            body{margin:0 auto;width:1600px}
            #frame {/*----------图片轮播相框容器----------*/  
                position: absolute; /*--绝对定位,方便子元素的定位*/  
                width: 1600px;  
                height: 480px;  
                overflow: hidden;/*--相框作用,只显示一个图片---*/  
                border-radius:5px;  
            }  
            #dis {/*--绝对定位方便li图片简介的自动分布定位---*/  
                position: absolute;  
                left: -50px;  
                top: -10px;  
                opacity: 0.5;  
            }  
            #dis li {  
                display: inline-block;  
                width: 1200px;  
                height: 20px;  
                margin: 0 50px;  
                float: left;  
                text-align: center;  
                color: #fff;  
                border-radius: 10px;  
                background: #000;  
            }  
            #photos img {  
                float: left;  
                width:1600px;  
                height:480px;  
            }  
            #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/  
                position: absolute;z-index:9px;  
                width: calc(1600px * 5);/*---修改图片数量的话需要修改下面的动画参数*/  
            }  
            .play{  
                animation: ma 20s ease-out infinite alternate;/**/  
            }  
            @keyframes ma {/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/  
                0%,20% {        margin-left: 0px;       }  
                25%,40% {       margin-left: -1600px;    }  
                45%,60% {       margin-left: -3200px;    }  
                65%,80% {       margin-left: -4800px;    }  
                85%,100% {      margin-left: -6400px;   }  
            }  
            .num{  
                position:absolute;z-index:10;  
                display:inline-block;  
                right:10px;top:425px;  
                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(2){margin-right:30px}  
            .num:nth-child(3){margin-right:60px}  
            .num:nth-child(4){margin-right:90px}  
            .num:nth-child(5){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:-6400px;}100%{margin-left:-0px;} }  
            @keyframes ma2 {0%{margin-left:-6400px;}100%{margin-left:-1600px;}   }  
            @keyframes ma3 {100%{margin-left:-3200px;}   }  
            @keyframes ma4 {100%{margin-left:-4800px;}   }  
            @keyframes ma5 {100%{margin-left:-6400px;}  }  
      </style>  

     <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">  
                 <a href="1"> <img src="http://jx.shengshihanqiao.com/index/banner.png" ></a>  
                  <a href="2"><img src="http://jx.shengshihanqiao.com/templets/default/images/zoujin1.png" ></a>  
                 <a href="3"> <img src="http://jx.shengshihanqiao.com/zt/fjj2016//images/banner.jpg" > </a>
                  <img src="http://jx.shengshihanqiao.com/zt/ysx2016/images/banner.png" >  
                 <img src="http://jx.shengshihanqiao.com/templets/default/images/zoujin1.png" >  
                  <ul id="dis">  
                    <li>中国标志性建筑:天安门</li>  
                    <li>中国标志性建筑:东方明珠</li>  
                    <li>中国标志性建筑:布达拉宫</li>  
                    <li>中国标志性建筑:长城</li>  
                    <li>中国标志性建筑:天坛</li>  
                  </ul>  
            </div>  
    </div>  
    </body>  
    </html> 


总计1条信息/共1页 
最近来访的网友

54.198.23.251

54.36.149.37

203.208.60.107

203.208.60.101

203.208.60.16

203.208.60.52

203.208.60.78

203.208.60.90

203.208.60.50

203.208.60.75

66.249.79.203

203.208.60.64

203.208.60.38

203.208.60.80

203.208.60.32

203.208.60.69

203.208.60.60

203.208.60.62

203.208.60.26

203.208.60.51
邱少网 ©1998-2018 神族网络信息分享无限公司|个人公益事业非经营网站
站长邮箱:mmxhero@163.com    站长QQ:156369596  
【最近访客=93 】  
mmxhero(M8,N0) mashaojun(M1,N3) 321456987(M1,N0) xutanyuan(M3,N0) outoTinfo(M1,N0) 100kvodka(M1,N0)
kmmmmp(M1,N0) GrizzliesX(M1,N0) linxiehan(M1,N0) deisy1991(M1,N0)