快捷導(dǎo)航

jQuery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果

更新時(shí)間：2016年05月09日 09:17:43 作者：輝子t1

在網(wǎng)頁(yè)上經(jīng)常可以看到有背景圖片可以自動(dòng)淡入淡入切換的效果，非常漂亮，實(shí)用性也非常高，今天小編給大家分享基于jquery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果，感興趣的朋友一起學(xué)習(xí)吧

相關(guān)閱讀：

Jquery代碼實(shí)現(xiàn)圖片輪播效果（一）

在網(wǎng)頁(yè)上經(jīng)?？梢钥吹接斜尘皥D片可以自動(dòng)淡入淡入切換的效果，非常漂亮，實(shí)用性也非常高。今天小編抽個(gè)時(shí)間給大家分享基于jquery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果，一起學(xué)習(xí)吧！

先給大家展示效果圖，如果大家覺(jué)得還不錯(cuò)，請(qǐng)參考具體實(shí)現(xiàn)代碼。

添加一個(gè)div（class=container），設(shè)置寬度和高度，這里設(shè)置了寬800px，高450px。添加居中的定位。在div里面添加一個(gè)ul(class="img")列表用來(lái)盛放圖片，設(shè)置ul里面的li標(biāo)簽position為absolute，這時(shí)圖片會(huì)重合在一起，同時(shí)設(shè)置display為none。圖片設(shè)置寬度和高度與container相同。在container里面再添加一個(gè)ul列表用來(lái)盛放下面的一排數(shù)字，然后進(jìn)行相應(yīng)的定位和設(shè)置。添加兩個(gè)div：left和right，分別是左右兩個(gè)按鈕，進(jìn)行相應(yīng)的定位和設(shè)置，里面的箭頭分別是大于號(hào)和小于號(hào)。

實(shí)現(xiàn)思路及原理介紹：

當(dāng)鼠標(biāo)移動(dòng)到對(duì)應(yīng)的數(shù)字上面的時(shí)候，用$(this).index()獲得數(shù)字所在容器里面的序號(hào)，然后將序號(hào)傳遞到eq()函數(shù)里面獲得 li 標(biāo)簽，然后添加函數(shù)fadeIn();這樣隱藏的圖片就顯示出來(lái)了，同時(shí)調(diào)用sibling().fadeOut()，讓同級(jí)的兄弟節(jié)點(diǎn)隱藏起來(lái)，這樣之前顯示的圖片就隱藏了起來(lái)。

添加setInterval()函數(shù)，讓圖片每隔相同的時(shí)間變換一次。

我覺(jué)得一個(gè)主要的問(wèn)題就是自動(dòng)切換和手動(dòng)切換的沖突，當(dāng)鼠標(biāo)移動(dòng)到圖片上面的時(shí)候應(yīng)該停止自動(dòng)切換，在這里用的方法是：

給container添加hover函數(shù)，當(dāng)鼠標(biāo)移動(dòng)到container里面的時(shí)候用clearInterval()函數(shù)去掉時(shí)間間隔函數(shù)，這樣當(dāng)鼠標(biāo)移動(dòng)到圖片上面的時(shí)候，圖片就不會(huì)切換了，當(dāng)鼠標(biāo)移出的時(shí)候添加setInterval()函數(shù)。這樣圖片就能繼續(xù)切換了。

注意：i 和 t 需要設(shè)置成全局變量，這樣不同的函數(shù)才能共用。i 表示當(dāng)前顯示圖片的索引。t 是setInterval的ID。當(dāng)鼠標(biāo)移出的時(shí)候不用再var一個(gè)t了，只需：t=setInterval(time_fun,1500);即可。

eq(n):找到第n個(gè)元素

eg：$('li').eq(2).css('background-color', 'red');//設(shè)置第二個(gè)li標(biāo)簽的背景顏色為紅色

index():找到該元素的索引值

有興趣的研究一下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>jquery_img_switch</title>
</head>
<style type="text/css">
*{
margin: ;
padding: ;
}
.container{
width: px;
height: px;
margin: px auto;
position: relative;
}
.container .img{
list-style: none;
/*position: absolute;*/
}
.container .img li{
position: absolute;
display: none;
}
.container .img img{
width: px;
height: px;
}
.container .num{
position: absolute;
list-style: none;
font-size: ;
bottom: px;
width: %;
text-align: center; 
}
.container .num li{
width: px;
height: px;
background: rgba(,,,.);
border-radius: %;
color: #;
display: inline-block;
line-height: px;
text-align: center;
font-size: px;
margin-right: px;
cursor: pointer;
}
.left, .right{
width: px;
height: px;
text-align: center;
line-height: px;
background-color: rgba(,,,.);
color: #fff;
position: absolute;
top: %;
margin-top: -px; 
font-size: px;
cursor: pointer;
}
.left{
left: px;
}
.right{
right: px;
}
.container .num .active{
background: rgba(,,,);
color: #fff;
}
</style>
<script type="text/javascript" src="../jquery-...min.js"></script>
<script type="text/javascript">
var i=;
var t;
$(document).ready(function(){
$(".container .img li").eq(i).fadeIn().siblings().fadeOut(); 
$(".container .num li").on("mouseover",active);
t=setInterval(time_fun,);
$(".container").hover(in_fun,out_fun);
$(".container .left").on("click",left_fun);
$(".container .right").on("click",right_fun);
});
function time_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function in_fun(){
clearInterval(t);
}
function out_fun(){
t=setInterval(time_fun,);
}
function active(){
$(this).addClass("active").siblings().removeClass("active");
$(".container .img li").eq($(this).index()).fadeIn().siblings().fadeOut();
i=$(this).index();
}
function left_fun(){
i--;
if(i==-){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
function right_fun(){
i++;
if(i==){
i=;
}
$(".container .num li").eq(i).addClass("active").siblings().removeClass("active");
$(".container .img li").eq(i).fadeIn().siblings().fadeOut();
}
</script>
<body>
<div class="container">
<ul class="img">
<li ><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
<li><img src="../../Img/.jpg"></li>
</ul>
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
</body>
</html>

以上是小編給大家?guī)?lái)的jQuery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果，希望對(duì)大家有所幫助，同時(shí)也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: