1.呼吸轮播图案例

 

　　①？user-select，该属性用于控制用户能够选中文本，

 

　　常用属性值：

 

　　none，表示元素及其子元素的文本不可选中。

 

　　text，用户可以选择文本。

 

　　auto、all、contain等

 

　　② is（":animated"），用于判断元素是否处于动画状态。

 

　　为了避免动画积累效应，设置该判断条件，如果元素不处于动画状态才添加新的动画。

 

　　语法：$（"选择器"） .is（":animated"）;　　//返回值为Boolean

 

　　③ index（），搜索匹配的元素返回指定元素的索引值，语法格式有三种写法：

 

　　$（"选择器"） .index（）;　　//表示当前 jq对象的第一个元素相对于其同辈元素的位置索引；

 

　　$（"选择器1"）？.index（"选择器2"）;　　//表示选择器1对应的元素在所有选择器2元素中的索引位置；

 

　　$（"选择器1"）？.index（$（"选择器2"）？）;　　//表示选择器2对应的元素在所有选择器1元素中的索引位置。

 

　　呼吸轮播图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;}"?_ue_custom_node_="true"><>=7）{

 

　　picIndex=0;

 

　　}

 

　　$imgLis.eq（picIndex）。fadeIn（1000）;

 

　　$anchorLis.eq（picIndex）。addClass（"anchorSelect"）

 

　　}）;

 

　　//设置通过锚点方式切换图片

 

　　$anchorLis.mouseenter（function?（）？{

 

　　$（".anchorSelect"）。removeClass（"anchorSelect"）;

 

　　$imgLis.eq（picIndex）。fadeOut（1000）;

 

　　picIndex=$（this）。index（）;?//获取当前节点在其对应的jq对象中的索引位置

 

　　$（this）。addClass（"anchorSelect"）;

 

　　$imgLis.eq（picIndex）。fadeIn（1000）;

 

　　}）;

 

　　//设置定时自动触发轮播，将向右按钮切换时间设置间隔执行函数。

 

　　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）;"?_ue_custom_node_="true">

 

　　2.animate（）方法

 

　　jQuery中的自定义动画方法

 

　　① 基本形态，animate函数包含领个参数，第一个参数是动画的最终样式（JSON格式）

 

　　第二个参数是执行动画所需要的时间（毫秒）

 

　　语法示例：$（"选择器"）？.animate（{JSON样式},?time）;

 

　　即使样式中只有一种属性，也要使用JSON格式书写，不能使用k,v格式。

 

　　在jQuery中“background-color、background-position”不能通过animate（）方法生成动画效果。

 

　　能够使用animate（）生成动画效果的属性基本上都是数值型的、可量化的。