jqueryラウンドマップスクロール効果
1925 ワード
html
<title>
<script src="http://s1.bdstatic.com/r/www/cache/static/jquery/jquery-1.10.2.min_f2fb5194.js"></script>
</title>
<div class="banner1">
<ul>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
<li class="ima"><img class="ma" src=""></li>
</ul>
</div>
css
.banner1{
overflow: hidden;
margin:50px auto 200px;
position: relative;
}
.banner1,ul,li{
height: 874px;
width: 1440px;
}
.banner1 ul{
position: absolute;
top: 0px;
left: 0px;
}
.banner1 .ima{
position: absolute;
float: left;
display: none;
}
.banner1 .ima .ma{
display: block;
}
js
var i=0;
$('.banner1 .ima').eq(i).find('img').attr('src',src+a[i]);
lunbo1();
function lunbo1(){
$('.banner1 .ima').eq(i+1).find('img').attr({src:src+a[i+1]});
$('.banner1 .ima').eq(i+1).fadeIn(3000).siblings('.ima').fadeOut(2000);
i++;
if(i > a.length-1){
i=0;
$('.banner1 .ima').eq(i).fadeIn(3000).siblings().fadeOut(2000);
};
}
setInterval(lunbo1,5000);