渐变轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
.bannerBox{max-width:1920px;height: 420px;position: relative;left: 50%;margin-left: -960px;}
.banner li,.bannerBtn,.page a{position: absolute; z-index: 9;list-style: none;}
.bannerBtn{left: 50%;bottom: 30px;margin-left: -51px;}
.bannerBtn li{height: 18px;width: 18px;border-radius: 9px;background: #fff;display: inline-block;cursor: pointer;margin-right: 10px;}
.bannerBtn li.active{background: #000;}
.page{max-width: 1920px;}
.page a:HOVER {background: rgba(0, 0, 0, 0.4);}
.page a{display: inline-block;height: 62px;width: 28px;background: rgba(0, 0, 0, 0.2);font-size: 22px;
color: #fff;line-height: 62px;text-align: center;top:50%;margin-top: -31px;position: absolute;}
.page a.next{left: 1890px;}
</style>
</head>
<body>
<div class="bannerBox">
<ul class="banner">
<li><a href="" title=""><img src="banner1.jpg" alt=""></a></li>
<li><a href="" title=""><img src="banner2.jpg" alt=""></a></li>
<li><a href="" title=""><img src="banner3.jpg" alt=""></a></li>
</ul>
<ul class="bannerBtn">
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
<li><a href="" title=""></a></li>
</ul>
<div class="page">
<a href="javascript:;" title="" class="pre"><</a>
<a href="javascript:;" title="" class="next">></a>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var length,currnIndex=0,interval,hasStarted = false,t=1500;
length=$(".banner li").length;
$(".banner li:not(:first)").hide();
$(".bannerBtn li:first").attr("class","active");
$(".page").hide();
$('.banner li,.pre,.next,.bannerBtn').hover(function(){
stop();
$(".page").show();
},function(){
$(".page").hide();
start();
});
$(".bannerBtn li").hover(function(){
var preIndex=$(".active").index();
currnIndex=$(this).index();
play(preIndex,currnIndex);
},function(){
})
function play(preIndex,currnIndex){
$(".banner li").eq(preIndex).fadeOut(1000);
$(".banner li").eq(currnIndex).fadeIn(1000);
$(".bannerBtn li").removeClass("active").eq(currnIndex).addClass("active")
}
$(".pre").click(function(){
pre();
})
$(".next").click(function(){
next();
})
function pre(){
var preIndex=currnIndex;
if (currnIndex>0) {
currnIndex--
}
else{
currnIndex=length-1;
}
play(preIndex,currnIndex)
}
function next(){
var preIndex=currnIndex;
if (currnIndex<length-1) {
currnIndex++
}
else{
currnIndex=0;
}
play(preIndex,currnIndex)
}
function start(){
if (!hasStarted) {
hasStarted=true;
interval=setInterval(next,t)
}
}
function stop(){
clearInterval(interval)
hasStarted=false;
}
</script>
</body>
</html>
浙公网安备 33010602011771号