jquery小动画图片box,详细注释 JQUERY

这个例子才写过2次,这次只有个大概的思路,写起来竟然还要先看看前次是怎么写的.......我这学的.......

/// $(document).ready(function () { //var lis = $("#images_box_ul").children("li"); //var numbers = $(".img_box_number").children("li"); //var image_counts = lis.length; //var i = 0; //var play; //autoPlay(); //function autoPlay() { //play = setInterval(function () { //if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候 //if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环 //$(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除 //lis.eq(i).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示 //$(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除 //numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式. //i++; //自增1 //}, 3000); //延时3秒执行一次 //}var lis = $("#images_box_ul").children("li"); var numbers = $(".img_box_number").children("li"); var visible_li = $("#images_box_ul li:visible"); //找到当前显示的图片 var image_counts = lis.length; var i = 0; var play; autoPlay(); function autoPlay() { play = setInterval(function () { if (i == 0) { i = 1 }; //不加这个判断,第1次呈现的时候将等待2次才会更换图片.因为默认显示的是第一张,所以赋值i为1,从第2张开始循环.仅限第1次的时候 if (i == image_counts) { i = 0 }; //如果这个值等于图片总数的时候.将其赋值为0,重新开始循环 visible_li.animate({ opacity: "0" }, 20); //200毫秒内将当前显示的图片的透明度opacity属性改为0,大括号内是键值对的关系 lis.eq(i).animate({ opacity: "1" }, 200); //200毫秒内将当前序号的opacity属性改为1,即显示图片 $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除 numbers.eq(i).addClass("in_imgbox_number"); //添加第i个数字上的样式. i++; //自增1 }, 3000); //延时3秒执行一次 } lis.mouseover(function () { clearInterval(play); }).mouseout(function () { autoPlay(); }); numbers.click(function () {//点击数字的时候 clickNo = $(this).index(); //获取当前点击的元素的序号 $(".in_imgbox_li").removeClass("in_imgbox_li"); //找到当前显示图片的class,并且移除 lis.eq(clickNo).addClass("in_imgbox_li"); //第一次从eq值为0开始,也就是第1个.为其添加样式,也就是显示 $(".in_imgbox_number").removeClass("in_imgbox_number"); //找到当前显示数字的class,移除 numbers.eq(clickNo).addClass("in_imgbox_number"); //添加第i个数字上的样式. }); });

jquery小动画图片box,详细注释

推荐阅读

降价|双11降价哪家强？iqoo：降900，三星：我降1300，荣耀：未知？

下厨房app菜单收藏方法

爱书签的孩子会有额外奖赏

金华个人所得税专项附加扣除指的是什么？

英语句法分析树

有哪些卖茶叶的天猫旗舰店值得推荐？

高仿尼康相机推荐高仿尼康相机

蛤蜊的营养功效

射手座女生喜欢什么样的礼物射手座女生漂亮吗

温州怎么查社保卡里有多少钱，怎么查社保余额

怎么用豆浆机打豆浆怎么用豆浆机打豆浆好喝

ps怎么给图像加影子详细教程

阳台种什么植物阳台种什么植物最旺风水

南极之恋是在南极拍的吗

vb.net设定为粗体 vb字体加粗代码后还原代码

快餐盒是什么材质的

孩子不阳光自信怎么办

榴莲,菠萝蜜,谁是你的最爱？

佳能35和50 佳能ef35与50

万答#13，MySQL自增键用完后，插入数据会发生什么情况