涉及知識(shí)點(diǎn)：
父元素與子元素的position
rgba()的4個(gè)參數(shù)可以設(shè)置顏色和透明度
transform:rotate(180deg)旋轉(zhuǎn)180度
background的屬性
jQuery的eq()遍歷方法寞射，fadeIn()淡入方法
setInterval()定時(shí)器的使用
實(shí)現(xiàn)效果：
- 圖片定時(shí)向右輪番淡入顯示
- 點(diǎn)擊兩邊箭頭可以向?qū)?yīng)方向顯示下張圖片
- 鼠標(biāo)移動(dòng)到圖片上停止播放
- 鼠標(biāo)移動(dòng)到對(duì)應(yīng)的點(diǎn)上顯示對(duì)應(yīng)的圖片
示例
話不多說隧膘，開搞失暴！
第一步：搭房子，把放圖片的盒子建好棍弄。
<div class="banner">
<div class="imges">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<ul class="bannerDot">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="bannerBtnL">
<a href="./img/left_arrow.png"></a>
</div>
<div class="bannerBtnR">
<a href="./img/right_arrow.png"></a>
</div>
</div>
第二步：刷涂料，設(shè)置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;
}
第三步：造機(jī)關(guān)鹿蜀，寫js文件夏哭。
$(document).ready(function () {
var bannerImg = $(".imges img"); //圖片
var dot = $(".bannerDot li"); //圓圈
var index = 0;
function demo(derection) {
//定義一個(gè)demo函數(shù)检柬，帶一個(gè)方向參數(shù)，方向向左或右；
if (derection == "right") {
index++;
//當(dāng)下標(biāo)>=圖片長(zhǎng)度何址，返回第一張里逆；
if (index >= bannerImg.length) {
index = 0;
}
} else if (derection == "left") {
index--;
//下標(biāo)<0的時(shí)候，下標(biāo)是圖片的長(zhǎng)度減一用爪；
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()方法 定時(shí)調(diào)用函數(shù)偎血，直到清除clearInterval();
var t = setInterval(function () {
demo("right");
}, 3000); //每3秒調(diào)用一次demo函數(shù)
$(".banner").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(function () {
demo("right");
}, 3000);
})
//點(diǎn)擊箭頭實(shí)現(xiàn)圖片向左向右诸衔；
$(".bannerBtnL").click(function () {
demo("left");
})
$(".bannerBtnR").click(function () {
demo("right");
})
//鼠標(biāo)移到圓圈上顯示對(duì)應(yīng)的圖片
dot.hover(function () {
var nowImg = $(this).index(); //當(dāng)前圓圈的下標(biāo)
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最后鼠標(biāo)指向圓圈顯示對(duì)應(yīng)圖片的時(shí)候笨农，剛開始用的fadeIn()方法，淡入淡出是很好帖渠，但是鼠標(biāo)從一個(gè)圓移到另一個(gè)圓的時(shí)候谒亦，接連兩次淡入淡出效果有點(diǎn)閃眼，所以干脆直接去掉效果用了show()方法空郊。
