html5 banner滚屏不用插件版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单页-01</title>
<script src="js/jquery.js"></script>
<style>
*{margin:0;padding: 0}
html{
width:100%;
}
body{
width: 100%;
}
#banner{
width: 100%;
}
#banner ul{
width: 100%;
}
#banner ul li{
list-style: none;
}
#banner ul li img{
display: block;
width: 100%;
}
#banner .pre,#banner .next{
left: 5%;
top: 50%;
position: absolute;
width: 40px;
height: 40px;
background: rgba(230,230,230,0.5) url(../images/slider-left.png) no-repeat center center;
}
#banner .next{
right: 5%;
left: auto;
background: rgba(230,230,230,0.5) url(../images/slider-right.png) no-repeat center center;
}
</style>
</head>
<body>
<header>
<div id="banner">
<ul>
<li><a href="#"><img src="images/t-1.png" alt=""></a></li>
</ul>
<a class="pre" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</header>
<script>
var i=1;
var t=null;
function auto(){
t=setInterval(function(){
i++;
if(i>2){
i=1;
}
$('#banner ul li img').attr('src','images/t-'+i+'.png');
},2000);
}
auto();
$('#banner ul li img').hover(function(){
clearInterval(t);
},function(){
auto();
})
$('.next,.pre').hover(function(){clearInterval(t)},function(){auto()});
$('.next').click(function(){
i++;
if(i>2){
i=1;
}
$('#banner ul li img').attr('src','images/t-'+i+'.png');
})
$('.prev').click(function(){
i--;
if(i<1){
i=2;
}
$("#banner ul li img").attr('src','images/t-'+i+'.png');
})
</script>
</body>
</html>
