jQuery 百分网手机站

jquery简单图片切换显示效果实现方法介绍

时间:2018-04-19 12:38:41 jQuery 我要投稿

关于jquery简单图片切换显示效果实现方法介绍

  本文实例讲述了jquery简单图片切换显示效果实现方法,分享给大家供大家参考。具体实现方法如下:

  复制代码 代码如下:

  $(function(){

  $("#item li:not(:first)").css("display","none");//只显示第一张图片,其它隐藏

  var bb = $("#item li:last");

  var aa = $("#item li:first");

  setInterval(function(){

  if(bb.is(":visible")){

  aa.fadeIn(1000).addClass("in");

  bb.hide();

  }else{

  $("#item li:visible").addClass("in");

  $("#item li.in").next().fadeIn(1000);

  $("#item li.in").fadeOut(1000).removeClass("in");

  }

  },3000);

  });

  li{list-style:none;display:block;width:500px;border:1px solid #ccc;padding:5px;}

  .in{display:block;}

【关于jquery简单图片切换显示效果实现方法介绍】相关文章:

1.关于jQuery trigger()方法用法介绍

2.关于jQuery实现高亮显示的方法介绍

3.jQuery实现左右图片轮播代码操作方法

4.jQuery实现网页进度显示插件方法

5.jQuery插件扩展extend的简单实现原理介绍

6.jQuery中outerWidth的方法介绍

7.jquery实现页面百叶窗走马灯式翻滚显示效果的有效方法

8.有关jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)