当前位置：首页 → 问答吧 → 基于jq的仿ALIPAY网站上的公告切换

基于jq的仿ALIPAY网站上的公告切换

时间：2010-05-30

来源：互联网

我自己照着改写了一个，现在问题是，当一个页面里有多个调用时，切换的时候就会出现问题，不是各切各的，而是你切完了我再切，郁闷。谁帮忙看一下代码，非常感谢。

<!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=gb2312" /> <title>无标题文档</title> <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <style type="text/css"> .scroll_news { position:relative; background:#f6f6f6; height:20px; clear:both} .scroll_list { margin:0; padding:0; list-style:none outside;} .scroll_list li { position:absolute; display:none; margin:0;} .scroll_switch { float:right; display:inline; margin:0;} .scroll_switch li { background:url(images/switcher.gif) no-repeat; width:11px; height:10px; float:left; display:inline;cursor:pointer; margin:0;} .scroll_switch li.hover { background-position: 0 -10px;} </style> <script type="text/javascript"> var t = n = count = 0; function goScroll(id){ var t = n = 0, count = $(id + " .scroll_list li").size(); if(count>0){ $(id + " .scroll_list li").eq(0).show(); createScroll_switch(id,count); $(id + " .scroll_switch li").eq(0).addClass("hover"); } $(id + " .scroll_switch li").click(function(){ var i = $(id + " .scroll_switch li").index(this); n = i; if (i >= count + 1) return; $(this).addClass("hover").siblings().removeClass("hover"); $(id + " .scroll_list li").eq(i).fadeIn(500).siblings().hide(); }); t = setInterval(function(){showAuto(id,count,n)}, 1000); $(id).hover( function(){clearInterval(t)}, function(){t = setInterval(function(){showAuto(id,count,n)}, 1000);} ); } function showAuto(id,count,n){ n = n >= (count - 1) ? 0 : ++n; $(id + " .scroll_switch li").eq(n).trigger('click'); } function createScroll_switch(id,count){ for (i=1;i<=count;i++){ $(id + " .scroll_switch").append("<li></li>"); } } </script> </head> <body> <div class="scroll_news" id="s1"> <ol class="scroll_list"> <li>国务院发紧急通知:补偿不到位不得强拆1</li> <li>南方周末：楼市风向标炒家不死2</li> <li>朝鲜宣布全面断绝与韩国关系并废除互不侵犯协议3</li> </ol> <ol class="scroll_switch"> </ol> </div> dddd <div class="scroll_news" id="s2"> <ol class="scroll_list"> <li>国务院发紧急通知:补偿不到位不得强拆1</li> <li>南方周末：楼市风向标炒家不死2</li> <li>朝鲜宣布全面断绝与韩国关系并废除互不侵犯协议3</li> </ol> <ol class="scroll_switch"> </ol> </div> <script type="text/javascript"> goScroll("#s1"); goScroll("#s2"); </script> </body> </html>
提示：您可以先修改部分代码再运行