|
1.呼吸輪播圖案例 ?、?nbsp;user-select，該屬性用于控制用戶能夠選中文本， 常用屬性值： none，表示元素及其子元素的文本不可選中。 text，用戶可以選擇文本。 auto、all、contain等 ?、?is(":animated")，用于判斷元素是否處于動(dòng)畫狀態(tài)。 為了避免動(dòng)畫積累效應(yīng)，設(shè)置該判斷條件，如果元素不處于動(dòng)畫狀態(tài)才添加新的動(dòng)畫。 語(yǔ)法：$("選擇器") .is(":animated"); //返回值為Boolean ?、?index()，搜索匹配的元素返回指定元素的索引值，語(yǔ)法格式有三種寫法： $("選擇器") .index(); //表示當(dāng)前 jq對(duì)象的第一個(gè)元素相對(duì)于其同輩元素的位置索引； $("選擇器1") .index("選擇器2"); //表示選擇器1對(duì)應(yīng)的元素在所有選擇器2元素中的索引位置； $("選擇器1") .index($("選擇器2") ); //表示選擇器2對(duì)應(yīng)的元素在所有選擇器1元素中的索引位置。 <head>
<meta charset="UTF-8">
<title>呼吸輪播圖</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<style>
*{margin: 0;padding: 0;}
.container{
width: 520px;height: 780px;margin: 0 auto;padding: 0;
border: 1px solid fuchsia;position: relative;
}
.imgUl{list-style: none;}
.imgUl li{position: absolute;display: none;}
.imgUl li:first-child{display: block;}
.leftBtn,.rightBtn{
width: 25px;height: 40px;background-color: darkorange;
color: white;font-size: 30px;line-height: 36px;text-align: center;
position: absolute;top: 46%;cursor: pointer;
user-select: none; /*設(shè)定元素內(nèi)文本內(nèi)容無(wú)法選中*/
}
.rightBtn{right: 0;}
.anchorUl{
list-style: none;position: absolute;left: 32%;bottom: 50px;
}
.anchorUl>li{
width: 15px;height: 15px;border: 3px solid orangered;
border-radius: 50%;display: inline-block;float: left;
margin: 0 3px;padding:0;cursor: pointer;
}
.anchorSelect{background-color: aqua;}
</style>
</head>
<body>
<div class="container">
<ul class="imgUl">
<li><a href="#"><img src="Images/Rotation/rotation01.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation02.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation03.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation04.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation05.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation06.jpg" alt=""></a></li>
<li><a href="#"><img src="Images/Rotation/rotation07.jpg" alt=""></a></li>
</ul>
<div class="leftBtn"><</div>
<div class="rightBtn">></div>
<ul class="anchorUl">
<li class="anchorSelect"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
<script>
var $imgLis=$(".imgUl li");
var $leftBtn=$(".leftBtn");
var $rightBtn=$(".rightBtn");
var $anchorLis=$(".anchorUl li");
var timer=null;
var picIndex=0;
$leftBtn.click(function () {
if ($imgLis.is(":animated")){
return;
}
//使用“.eq()”方法選擇指定jq對(duì)象中對(duì)應(yīng)索引的元素
$imgLis.eq(picIndex).fadeOut(1000);
$anchorLis.eq(picIndex).removeClass("anchorSelect")
picIndex--;
// 設(shè)置錨點(diǎn)的選中狀態(tài)切換
//向左翻頁(yè)時(shí)索引值自減，當(dāng)減到0時(shí)下次點(diǎn)擊則從最后一個(gè)索引重復(fù)循環(huán)
if (picIndex<=-1){
picIndex=6;
}
$imgLis.eq(picIndex).fadeIn(1000);
$anchorLis.eq(picIndex).addClass("anchorSelect")
});
$rightBtn.click(function () {
//使用“animated”屬性判斷指定元素中是否存在動(dòng)畫運(yùn)行，
//如果有則忽略任何新的觸發(fā)操作，進(jìn)而避免“動(dòng)畫積累”問題
// 該方式與“stop()"方式存在一定差別。
if ($imgLis.is(":animated")){
return;
}
$imgLis.eq(picIndex).fadeOut(1000);
$anchorLis.eq(picIndex).removeClass("anchorSelect")
picIndex++;
if (picIndex>=7){
picIndex=0;
}
$imgLis.eq(picIndex).fadeIn(1000);
$anchorLis.eq(picIndex).addClass("anchorSelect")
});
//設(shè)置通過錨點(diǎn)方式切換圖片
$anchorLis.mouseenter(function () {
$(".anchorSelect").removeClass("anchorSelect");
$imgLis.eq(picIndex).fadeOut(1000);
picIndex=$(this).index(); //獲取當(dāng)前節(jié)點(diǎn)在其對(duì)應(yīng)的jq對(duì)象中的索引位置
$(this).addClass("anchorSelect");
$imgLis.eq(picIndex).fadeIn(1000);
});
// 設(shè)置定時(shí)自動(dòng)觸發(fā)輪播，將向右按鈕切換時(shí)間設(shè)置間隔執(zhí)行函數(shù)。
timer=setInterval(function () {
if ($imgLis.is(":animated")){
return;
}
$imgLis.eq(picIndex).fadeOut(2000);
$anchorLis.eq(picIndex).removeClass("anchorSelect")
picIndex++;
if (picIndex>=7){
picIndex=0;
}
$imgLis.eq(picIndex).fadeIn(2000);
$anchorLis.eq(picIndex).addClass("anchorSelect")
},3000);
</script>
</body>
</html>
2.animate()方法 jQuery中的自定義動(dòng)畫方法 ?、?基本形態(tài)，animate函數(shù)包含領(lǐng)個(gè)參數(shù)，第一個(gè)參數(shù)是動(dòng)畫的最終樣式(JSON格式) 第二個(gè)參數(shù)是執(zhí)行動(dòng)畫所需要的時(shí)間（毫秒） 語(yǔ)法示例：$("選擇器") .animate({JSON樣式}, time); 即使樣式中只有一種屬性，也要使用JSON格式書寫，不能使用k,v格式。 在jQuery中“background-color、background-position”不能通過animate()方法生成動(dòng)畫效果。 能夠使用animate()生成動(dòng)畫效果的屬性基本上都是數(shù)值型的、可量化的。 ② 動(dòng)畫順序 同步原則，同一個(gè)元素如果存在多個(gè)animate()命令，則按照添加順序執(zhí)行； 異步原則，不同元素分別設(shè)置各自的animate()命令，則它們同時(shí)執(zhí)行。 ?、?nbsp;勻速運(yùn)動(dòng) animate()方法的第三個(gè)參數(shù)用于定義動(dòng)畫時(shí)間曲線，可選參數(shù)， animate()方法默認(rèn)的動(dòng)畫并不是勻速執(zhí)行的，而是先加速后減速的方式。 animate()方法自帶的兩種動(dòng)畫效果，linear（線性勻速）、swing（先加速后減速，默認(rèn)） ?、?回調(diào)函數(shù) animate()方法的第四個(gè)參數(shù)用于定義回調(diào)函數(shù)，可選參數(shù)，為動(dòng)畫執(zhí)行完成時(shí)執(zhí)行的函數(shù)。 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<style>
.div{
width: 100px;height: 100px;background-color: orangered;
position: absolute;
}
</style>
</head>
<body>
<div class="div"></div>
<script>
$('.div').click(function () {
$(this).animate({left:700},2000,"linear")
.animate({height:500},1000,"swing")
.animate({height: 100,top:400},1000,function () {
$(this).css("backgroundColor","skyblue")
});
});
</script>
</body>
</html>
3.stop()方法 用于停止元素動(dòng)畫。 語(yǔ)法：$("選擇器") .stop(clearAllAnimation，goToEnd); 該方法有兩個(gè)參數(shù)（都是Boolean）： 第一個(gè)參數(shù)表示是否清空所有動(dòng)畫，默認(rèn)為“false”，表示不清除； 第二個(gè)參數(shù)表示是否立即完成當(dāng)前動(dòng)畫，默認(rèn)為“false”，表示不立即完成。 兩個(gè)參數(shù)都可以不寫，此時(shí)采用默認(rèn)值。 4.百葉窗案例 ?、?find()，該方法用于搜索指定元素的所有符合條件的后代元素。 語(yǔ)法：$("選擇器") .find("后代選擇器"); ps：符合條件的后代包括子元素、孫元素等所有后代； 如果要返回所有后代元素，則后代選擇器使用“*”。 <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<style>
*{margin: 0;padding: 0;}
.container{
width: 912px;height: 780px;border: 1px solid orangered;
margin: 0 auto;overflow:hidden;position: relative;
}
.container ul{list-style: none;cursor: pointer}
.container ul li{position: absolute}
.cover{
width: 100%;height: 780px;background-color: rgba(255,100,150,.6);
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><div class="cover"></div><img src="Images/Rotation/rotation01.jpg" alt=""></li>
<li><div class="cover"></div><img src="Images/Rotation/rotation02.jpg" alt=""></li>
<li><div class="cover"></div><img src="Images/Rotation/rotation03.jpg" alt=""></li>
<li><div class="cover"></div><img src="Images/Rotation/rotation04.jpg" alt=""></li>
<li><div class="cover"></div><img src="Images/Rotation/rotation05.jpg" alt=""></li>
<li><div class="cover"></div><img src="Images/Rotation/rotation06.jpg" alt=""></li>
</ul>
</div>
<script>
var $picLis=$(".container ul li");
var picIndex=0;
for(var i=0;i<$picLis.length;i++){
picIndex=$picLis.eq(i).index();
$picLis.eq(i).css("left",picIndex*152+"px")
}
$picLis.mouseenter(function () {
$picLis.stop();
var selectIndex=$(this).index();
for(var i=0;i<$picLis.length;i++){
picIndex=$picLis.eq(i).index();
if (picIndex<=selectIndex){
$picLis.eq(i).animate({"left":picIndex*78.4+"px"},1000);
}else {
$picLis.eq(i).animate({"left":(picIndex-1)*78.4+520+"px"},1000);
}
}
$(this).find(".cover").stop(true,true).fadeOut(1000);
}).mouseleave(function () {
$picLis.stop();
for(var i=0;i<$picLis.length;i++){
picIndex=$picLis.eq(i).index();
$picLis.eq(i).animate({"left":picIndex*152+"px"},1000);
$(this).find(".cover").stop(true,true).fadeIn(1000);
}
});
</script>
</body>
</html>
|
|
|
