这里引用了jQuery类库,所以不要忘了先将jQuery引入,下面三张图对应为banner1,banner2,banner3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>banner轮播</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var banners = ["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"];
var index = 0;
//banner自动播放
function autoplay(){
index ++;
if(index >= banners.length){
index = 0;
}
$("#img").attr("src",banners[index]);
var pot = $(".roll-pot li").removeClass("roll-pot-bg");
$(pot[index]).addClass("roll-pot-bg");
}
var play = setInterval(autoplay,1000);
//鼠标滑过出现左右按钮
function btnB(){
clearInterval(play);
$(".btn").css("display","block");
}
//鼠标滑过隐藏左右按钮
function btnN(){
play = setInterval(autoplay,1000);
$(".btn").css("display","none");
}
//点击左按钮
function btnL(){
index == 0 ? index = banners.length-1 : index --;//三目运算符
$("#img").attr("src",banners[index]);
var pot = $(".roll-pot li").removeClass("roll-pot-bg");
$(pot[index]).addClass("roll-pot-bg");
}
//点击又按钮
function btnR(){
index == banners.length-1 ? index = 0 : index ++;
$("#img").attr("src",banners[index]);
var pot = $(".roll-pot li").removeClass("roll-pot-bg");
$(pot[index]).addClass("roll-pot-bg");
}
//鼠标滑过小圆点
function roll(a){
index = a;
var pot = $(".roll-pot li").removeClass("roll-pot-bg");
$(pot[a]).addClass("roll-pot-bg");
$("#img").attr("src",banners[a]);
}
</script>
<style type="text/css">
* { list-style: none; text-decoration: none;}
.banner { position: relative;}
.roll-pot { width:90px; position: absolute; top:80%; left:50%; margin-left:-45px;}
.roll-pot li { float:left; width:20px; height:20px; text-align: center; line-height:20px; border-radius:20px; background:rgba(0,0,0,.7); margin-left:8px;}
.roll-pot li a { color:#fff;}
.btn { display:none; position:absolute; width:30px; height:80px; left: 10%; top:50%; margin-top:-40px; background:rgba(0,0,0,.5); line-height: 80px; text-align: center; font-size: 36px;}
.btn a { color:#fff;}
.btnR{ left: 90%!important;}
.roll-pot-bg { background:rgba(250,0,0,.8)!important;}
</style>
</head>
<body>
<div class="banner" οnmοuseοver="btnB()" οnmοuseοut="btnN()">
<p class="btn" οnclick="btnL()"><a href="javascript:void(0)"><</a></p>
<img src="img/banner1.jpg" id="img" alt="banner1">
<ul class="roll-pot" >
<li class="roll-pot-bg" οnmοuseοver="roll(0)"><a href="javascript:void(0)">1</a></li>
<li οnmοuseοver="roll(1)"><a href="javascript:void(0)">2</a></li>
<li οnmοuseοver="roll(2)"><a href="javascript:void(0)">3</a></li>
</ul>
<p class="btn btnR" id="right" οnclick="btnR()"><a href="javascript:void(0)">></a></p>
</div>
</body>
</html>