下面有完整代码，一个网上摘得轮播插件，文字跟图片同时出现，以文字加到图片子元素中，但是位置不同，所以用fixed解决，但是后续中我给文字加animation后，文字被图片遮盖，只能在动画播放完才能出现，求大大们解决~
下面有代码。。和图片事宜，图片画质有点渣
完整代码。。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>an</title>
<script src="../web/js/jquery-3.1.0.js"></script>
<script>
$(document).ready(function() {
var length,
currentIndex = 0,
interval,
hasStarted = false, //是否已经开始轮播
t = 3000; //轮播时间间隔
length = $('.slider-panel').length;
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel').hover(function() {
stop();
$('.slider-page').show();
}, function() {
$('.slider-page').hide();
start();
});
$('.slider-item').hover(function(e) {
stop();
var preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
play(preIndex, currentIndex);
}, function() {
start();
});
$('.slider-pre').unbind('click');
$('.slider-pre').bind('click', function() {
pre();
});
$('.slider-next').unbind('click');
$('.slider-next').bind('click', function() {
next();
});
/**
* 向前翻页
*/
function pre() {
var preIndex = currentIndex;
currentIndex = (--currentIndex + length) % length;
play(preIndex, currentIndex);
}
/**
* 向后翻页
*/
function next() {
var preIndex = currentIndex;
currentIndex = ++currentIndex % length;
play(preIndex, currentIndex);
}
/**
* 从preIndex页翻到currentIndex页
* preIndex 整数，翻页的起始页
* currentIndex 整数，翻到的那页
*/
function play(preIndex, currentIndex) {
$('.slider-panel').eq(preIndex).fadeOut(500)
.parent().children().eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}
/**
* 开始轮播
*/
function start() {
if(!hasStarted) {
hasStarted = true;
interval = setInterval(next, t);
}
}
/**
* 停止轮播
*/
function stop() {
clearInterval(interval);
hasStarted = false;
}
//开始轮播
start();
});
</script>
<style>
@keyframes myfirst{
0% {margin-left:0px;opacity: 1;}
50%{margin-left:-60px;opacity: 0;}
100% {margin-left:0%;opacity: 1;}
}
@-moz-keyframes myfirst{
0% {margin-left:0px;opacity: 1;}
50%{margin-left:-60px;opacity: 0;}
100% {margin-left:0%;opacity: 1;}
}
@-webkit-keyframes myfirst{
0% {margin-left:0px;opacity: 1;}
50%{margin-left:-60px;opacity: 0;}
100% {margin-left:0%;opacity: 1;}
}
* {
margin: 0;
padding: 0;
height:100%;
box-sizing: border-box;
overflow: hidden;
}
a{
text-decoration:none
}
.slider {
position:fixed;
top:7.77%;
left:58.3333%;
width:33.3333%;
height:88%;
z-index:1;
}
.img1{
max-width:100%;
max-height:100%;
background-image:url(http://img2.imgtn.bdimg.com/it/u=3224860512,2623772592&fm=206&gp=0.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
margin:0 auto;
}
.img2{
max-width:100%;
max-height:100%;
background-image:url(http://img5.imgtn.bdimg.com/it/u=4106917366,2081124773&fm=206&gp=0.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
margin:0 auto;
}
.word{
position:fixed;
color:#333;
margin-left:10px;
font:92px/100px Futura;
letter-spacing:8px;
top:33%;
left:24.5%;
height:200px;
animation:myfirst 2s;
}
</style>
</head>
<body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel img1">
<a href="h#"><span class="word">WORD ANIMATE</span></a>
</li>
<li class="slider-panel img2">
<a href="h#"><span class="word">DO<br />DESGIN</span></a>
</li>
</ul>
</div>
<div id="chose">
<ul class="slider-nav">
<li class="slider-item"></li>
<li class="slider-item"></li>
</ul>
</div>
</body>
</html>
