JQuery实现图片轮播(非滚动)

思想:

1,所有图片使用绝对定位,定位在同一位置

2,为标签添加点击事件,当前元素添加class类on,其兄弟节点失去on类(外观发生改变),当前显示的图片逐渐消失,通过索引显示点击对应的图片。

3,自动调用shouAuto函数,该函数自动执行点击事件,实现循环定时播放。

4,当鼠标悬停的时候停止调用自动播放函数

主要点:

1,$("xxx").fadeIn(1000);//淡入 fadeOut('slow');//淡出

2,siblings()//获得匹配集合中每个元素的同胞(兄弟节点)

3,setInterval("showAuto()",4000);//会不停的调用函数,直到clearInterval()被调用或被窗口关闭。由setInterval()返回的id值可以作为clearInterval()方法的参数。

4,三元表达式:n=n>=(count -1) ?0 : ++n;


你可能感兴趣的:(JQuery实现图片轮播(非滚动))