jquery实战2:轮播图和滑动导航效果
| jquery实战2:轮播图和滑动导航效果 /*导航开始*/ $("#n_ul").find("li").hover(function(){ var auto_left=($(window).width() - 1200)/2//计算距左侧的距离:窗口的动态宽度-标签定义的宽度1200除以2就是第一个Li标签距左侧的距离。 var _left=$(this).offset().left-auto_left;//当前选中标签离左边的距离-第一个li标签距左侧的距离就是该Li标签的绝对定位left的值. $(".nav").find(".cursor").stop();//这里不用stop停止的话,之前的事件无法停下来,就会积累效果,导致滑动的时间很长,不能立马响应。也就是下次动画之前必须把上次的动画停止下来。 $(".nav").find(".cursor").animate({left:_left},100);//100毫秒内移动P标签样式为一根线到相应的位置,根据鼠标所放置的Li标签的位置决定的。 }); /*导航结束*/ /*轮播图开始*/ $(".btn").find("li").mouseover(function(){ $(this).addClass("on").siblings().removeClass("on");//根据类名.btn遍历到此类名下面的所有li标签的集合,用addClass给这些标签添加on的样式。但是后面又用取得相邻的元素并去除On样式。所以只会显示当前选中的li标签的on样式。不做这siblings().removeClass("on")处理会导致选中后无法去除。 $(".b-img").css({"z-index":0});//给所有的轮播图设置z-index:为0,级别最低, var _index=$(this).index();//获取索引值。 $('.b-img').eq(_index).css("z-index",1).fadeTo(1000,1);//根据所选的li标签的索引号,来改变z-index值为1,这样就把所选的图片调到最上方显示了。 }); /*轮播图结束*/ |
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
