涉及知识点：
父元素与子元素的position
rgba()的4个参数可以设置颜色和透明度
transform:rotate(180deg)旋转180度
background的属性
jQuery的eq()遍历方法，fadeIn()淡入方法
setInterval()定时器的使用
实现效果：
- 图片定时向右轮番淡入显示
- 点击两边箭头可以向对应方向显示下张图片
- 鼠标移动到图片上停止播放
- 鼠标移动到对应的点上显示对应的图片
示例
话不多说，开搞！
第一步：搭房子，把放图片的盒子建好。
第二步：刷涂料，设置css样式。
* {
border: 0;
margin: 0;
padding: 0;
list-style: none;
}
.banner {
width: 850px;
height: 500px;
margin: 0 auto;
position: relative;
}
.banner .imges {
position: relative;
}
.banner .imges img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
}
.bannerDot {
width: 100px;
height: 10px;
position: absolute;
right: 40%;
bottom: 20px;
}
.bannerDot li {
list-style: none;
float: left;
width: 8px;
height: 8px;
margin: 2px;
border: 2px solid rgba(225, 225, 225, 0.3);
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.bannerDot li:hover {
border: 2px solid rgba(0, 0, 0, 0.4);
background: rgba(255, 255, 255, 0.6);
}
.bannerBtnL {
height: 70px;
width: 40px;
background: url(img/arrows.png) no-repeat -0px -123px;
transform: rotate(180deg);
position: absolute;
left: 0;
top: 50%;
margin-top: -42px;
cursor: pointer;
}
.bannerBtnL:hover {
background-position: -86px -123px;
}
.bannerBtnR {
height: 70px;
width: 40px;
background: url(img/arrows.png) no-repeat -0px -123px;
position: absolute;
right: 0;
top: 50%;
margin-top: -42px;
cursor: pointer;
}
.bannerBtnR:hover {
background-position: -86px -123px;
}
第三步：造机关，写js文件。
$(document).ready(function () {
var bannerImg = $(".imges img"); //图片
var dot = $(".bannerDot li"); //圆圈
var index = 0;
function demo(derection) {
//定义一个demo函数，带一个方向参数，方向向左或右；
if (derection == "right") {
index++;
//当下标>=图片长度，返回第一张；
if (index >= bannerImg.length) {
index = 0;
}
} else if (derection == "left") {
index--;
//下标<0的时候，下标是图片的长度减一；
if (index <= -1) {
index = bannerImg.length - 1;
}
}
bannerImg.hide(); //图片隐藏；
bannerImg.eq(index).fadeIn(); //fadeIn()方法，使用淡入效果显示被选元素
dot.css({
background: "rgba(0,0,0,0.4)",
border: "2px solid rgba(225, 225, 225, 0.3)"
}); //圆圈添加css
dot.eq(index).css({
background: "rgba(225, 225, 225,0.6)",
border: "2px solid rgba(0,0,0,0.3)"
}); //遍历圆圈更改css
}
//setInterval()方法 定时调用函数，直到清除clearInterval();
var t = setInterval(function () {
demo("right");
}, 3000); //每3秒调用一次demo函数
$(".banner").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(function () {
demo("right");
}, 3000);
})
//点击箭头实现图片向左向右；
$(".bannerBtnL").click(function () {
demo("left");
})
$(".bannerBtnR").click(function () {
demo("right");
})
//鼠标移到圆圈上显示对应的图片
dot.hover(function () {
var nowImg = $(this).index(); //当前圆圈的下标
dot.css({
background: "rgba(0,0,0,0.4)",
border: "2px solid rgba(225, 225, 225, 0.3)"
});
$(this).css({
background: "rgba(225, 225, 225,0.6)",
border: "2px solid rgba(0,0,0,0.3)"
});
bannerImg.hide();
bannerImg.eq(nowImg).show();
index = nowImg;//善后工作，图片接着播放下一张
})
})
第四步：打完收工。Y(_)Y
附上示例所用的箭头图：
arrows.png
最后啰嗦几句
js最后鼠标指向圆圈显示对应图片的时候，刚开始用的fadeIn()方法，淡入淡出是很好，但是鼠标从一个圆移到另一个圆的时候，接连两次淡入淡出效果有点闪眼，所以干脆直接去掉效果用了show()方法。