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

英雄无敌 48 级
    4826
 
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.162.184.214

144.76.110.229

54.36.148.134

106.11.156.178

207.46.13.112

106.11.154.178

106.120.173.72

203.208.60.152

5.9.98.130

54.36.148.83

180.76.15.19

207.46.13.189

106.11.158.232

46.229.168.68

220.181.158.218

54.36.148.59

157.55.39.39

106.11.155.170

54.36.149.22

203.208.60.151
邱少网 ©1998-2018 神族网络信息分享无限公司|个人公益事业非经营网站
站长邮箱:mmxhero@163.com    站长QQ:156369596  
【最近访客=88 】 
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) GuDaihui(M1,N0) 最爱的炸酱面(M1,N0)
JokerJX(M1,N0) xuxin9(M1,N0) fangyujie(M1,N0) mmxhero5(M3,N0) mmxhero1(M1,N0) C.C.liubo(M1,N0)
yaojiabin(M1,N0) YangMingChi(M1,N0)