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

时间:2020-11-10 14:37:49 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;}