要点:
1、鼠标移至图片上出现左右箭头,鼠标移出图片时,左右箭头消失
2、单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭头时继续显示轮播图片
3、定时1秒换一张图片,轮播出图片,直到最后一张时换第一张轮播,依次类推。
4、鼠标移至图片上,定时就消失;鼠标移出图片,定时就开始轮播图片。
页面效果如上:
adv.html页面
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/adv.css">
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"><</div>
<div class="arrowRight">></div>
</div>
</body>
adv.css
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.adver {
margin: 0 auto;
width: 590px;
overflow: hidden;
height: 470px;
position: relative;
background: url("../images/adver01.jpg");
}
ul {
position: absolute;
bottom: 10px;
z-index: 100;
width: 100%;
text-align: center;
}
ul li {
display: inline-block;
font-size: 10px;
line-height: 20px;
font-family: "微软雅黑";
margin: 0 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #333333;
text-align: center;
color: #ffffff;
}
.arrowLeft,
.arrowRight {
position: absolute;
width: 30px;
background: rgba(0, 0, 0, 0.2);
height: 40px;
line-height: 40px;
text-align: center;
top: 200px;
z-index: 150;
font-family: "微软雅黑";
font-size: 25px;
font-weight: bold;
cursor: pointer;
display: none;
color:snow;
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
.bg{
background: orange;
}
adv.js
$(function() {
//添加第一个样式
$("li:first").addClass("bg");
//鼠标移动 adver
$(".adver").mouseover(function() {
$(".arrowLeft").show();
$(".arrowRight").show();
}).
mouseout(function() {
$(".arrowLeft").hide();
$(".arrowRight").hide();
});
//图片数组
var imgs = new Array("adver01.jpg", "adver02.jpg", "adver03.jpg", "adver04.jpg", "adver05.jpg", "adver06.jpg");
//统计个数
var count = 0;
//单击右 边的>
$(".arrowRight").click(function() {
//判断
if(count == imgs.length - 1) {
count=0;
} else {
count++; //累计
}
$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
});
//单击左边的>
$(".arrowLeft").click(function() {
//判断
if(count == 0) {
count=imgs.length - 1;
} else {
count--; //累计
}
$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
});
图片自动滚动/
//开启定时器
var timer = setInterval(function() {
if(count == imgs.length - 1) {
count=0; //回到起点0
} else {
count++; //累计
}
$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
}, 1000);
//鼠标移入、移出
$(".adver").hover(function() {
clearInterval(timer); //鼠标移入,定时器关闭
}, function() {
//鼠标移出,开启定时器
timer = setInterval(function() {
if(count == imgs.length - 1) {
count=0; //回到起点0
} else {
count++; //累计
}
$(".adver").css("background", "url(images/" + imgs[count] + ")"); //添加图片
$('li:eq(' + count + ')').addClass("bg"); //添加圆圈背景
$('li:eq(' + count + ')').siblings().removeClass("bg"); //删除前面的圆圈背景
}, 1000);
});
});