jquery幻灯片简单实现方法

来源：互联网发布：linux while true 编辑：程序博客网时间：2024/06/05 05:55

方法一<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery幻灯片简单实现方法</title><SCRIPT type=text/javascript src="js/jquery.js"></SCRIPT><SCRIPT>//<![CDATA[$(function(){(function(){var curr = 0;$("#jsNav .trigger").each(function(i){$(this).click(function(){curr = i;$("#js img").eq(i).fadeIn("slow").siblings("img").hide();$(this).siblings(".trigger").removeClass("imgSelected").end().addClass("imgSelected");return false;});});var pg = function(flag){//flag:true表示前翻， false表示后翻if (flag) {if (curr == 0) {todo = 2;} else {todo = (curr - 1) % 3;}} else {todo = (curr + 1) % 3;}$("#jsNav .trigger").eq(todo).click();};//前翻$("#prev").click(function(){pg(true);return false;});//后翻$("#next").click(function(){pg(false);return false;});//自动翻var timer = setInterval(function(){todo = (curr + 1) % 3;$("#jsNav .trigger").eq(todo).click();},4000);//鼠标悬停在触发器上时停止自动翻$("#jsNav a").hover(function(){clearInterval(timer);},function(){timer = setInterval(function(){todo = (curr + 1) % 3;$("#jsNav .trigger").eq(todo).click();},1500);});})();});//]]></SCRIPT></head><body style="text-align:center"><!--js开始 --><DIV id=js class="js"><IMG alt="" src="images/01.jpg"> <IMG style="DISPLAY: none" alt="" src="images/02.jpg"> <IMG style="DISPLAY: none" alt="" src="images/03.jpg"> <DIV id=jsNav class=jsNav><A id=prev class=prevBtn href="javascript:void(0)"></A><A class="trigger imgSelected" href="javascript:void(0)">1</A><A class=trigger href="javascript:void(0)">2</A><A class=trigger href="javascript:void(0)">3</A><A id=next class=nextBtn href="javascript:void(0)"></A></DIV></DIV><!--js结束--></body></html>

方法二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"  /><script type="text/javascript" src="jquery.js"></script><script type = "text/javascript">function scroll_news(){    var firstNode = $('#scroll-container li'); //获取li对象    firstNode.eq(0).fadeOut("slow", function(){ //获取li的第一个,执行fadeOut,并且call - function.     $(this).clone().appendTo($(this).parent()).show(); //把每次的li的第一个 克隆，然后添加到父节点 对象。     $(this).remove();//最后  把每次的li的第一个 去掉。  });}setInterval('scroll_news()',2000);//每隔0.5秒，执行scroll_news()</script></head><body ><div id="scroll-container" style="height:260px;width:640px;overflow: hidden;">  <li><img src="img/广告1.png" width="640" height="287" /></li>  <li><img src="img/广告2.png" width="640" height="297" /></li>  <li><img src="img/广告3.png" width="640" height="297" /></li></div></body></html>

0 0