jQuery循环滚动展示代码 可应用到文字和图片上

  看见有的同学用 Adam Cai 的代码,感觉稍显复杂而且不够 jQuery。我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单。

  在线演示: http://demo.glzy8.com/js/2012/jquery_xhpic/

jQuery循环滚动展示代码 可应用到文字和图片上

  [JavaScript]代码

  

复制代码 代码如下:

  $(document).ready(function(){

  $("#sItem li:not(:first)").css("display","none");

  var B=$("#sItem li:last");

  var C=$("#sItem li:first");

  setInterval(function(){

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

  C.fadeIn(500).addClass("in");B.hide()

  }else{

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

  $("#sItem li.in").next().fadeIn(500);

  $("li.in").hide().removeClass("in")}

  },3000) //每3秒钟切换一条,你可以根据需要更改

  })

  HTML 部分:

  

复制代码 代码如下:

  <ul id="sItem">

  <li>文字或图片</li>

  <li>文字或图片</li>

  <li>文字或图片</li>

  </ul>