<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
height: 350px;
/*/!*background: red;*!/*/
/*float: left;*/
margin-top:60px;
margin-left: -2px;
position: absolute;
border-radius:5px;
margin-bottom: 60px;
}
#frame {/*----------图片轮播相框容器----------*/
position: absolute; /*--绝对定位，方便子元素的定位*/
width: 960px;
height: 350px;
overflow: hidden;/*--相框作用，只显示一个图片---*/
border-radius:5px;
border: 1px solid; margin-top:50px ;
}
#photos img {
float: left;
width:960px;
height:350px;
}
#photos {
/*---设置总的图片宽度--通过位移来达到轮播效果----*/
position: absolute;
/*z-index:9;*/
width: calc(960px * 5);/*---修改图片数量的话需要修改下面的动画参数*/
}
.play{
animation: ma 5s ease-out infinite alternate;
}
/*@keyframes ma {/!*---每图片切换有两个阶段：位移切换和静置。*/
/*中间的效果可以任意定制----*!/*/ /!*不注释 即 自动播放*！/
/*0%,20% { margin-left: 0; }*/
/*25%,40% { margin-left: -960px; }*/
/*45%,60% { margin-left: -1920px; }*/
/*65%,80% { margin-left: -2880px; }*/
/*85%,100% { margin-left: -3840px; }*/
/*}*/
.num{
position:absolute;
z-index:10;
/*display:inline-block;*/
float: left;
right:10px;
top:295px;
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:-4800px;}
100%{margin-left:-0px;} }
@keyframes ma2 {0%{margin-left:-4800px;}
100%{margin-left:-960px;} }
@keyframes ma3 {100%{margin-left:-2880px;} }
@keyframes ma4 {100%{margin-left:-3840px;} }
@keyframes ma5 {100%{margin-left:-3840px;} }
#dis {/*--绝对定位方便li图片简介的自动分布定位---*/
position: absolute;
left: -50px;
top: 0;
opacity: 0.5;
}
#dis li {
display: inline-block;
width: 200px;
height: 20px;
/*margin: 0 50px;*/
margin-left: 768px;
float: left;
text-align: center;
color: #fff;
border-radius: 10px;
background: #000;
}
</style>
</head>
<body>
<div class="grid_24 div1">
<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=""> <img src="image/1.jpg" > </a>
<a href=""> <img src="image/15.jpg" ></a>
<a href=""> <img src="image/6.jpg" ></a>
<a href=""> <img src="image/9.jpg" ></a>
<a href=""> <img src="image/13.jpg" ></a>
<ul id="dis">
<li>燃烧海王</li>
<li> 激情时刻 </li>
<li>路飞与超新星</li>
<li>翻外篇</li>
</ul>
</div>
</div>
</div>
</body>
</html>
