jQuery--图片轮换

转载 (原文地址) 大冬瓜 随笔 jQuery 2812阅读 2011-04-07 09:58:35 举报

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<br>&lt;title&gt;滚动图片&lt;/title&gt;<br>&lt;script src="js/jquery-1.5.1.min.js" language="javascript"&gt;&lt;/script&gt;<br>&lt;script src="js/jquery.easing.1.3.js" language="javascript"&gt;&lt;/script&gt;<br>&lt;script language="javascript" type="text/javascript"&gt;<br>$(function()<br>{<br>&nbsp;&nbsp; &nbsp;gd('.content','current');<br>&nbsp;&nbsp; &nbsp;//window.setInterval(gd(".content","current"),1000);<br>&nbsp;&nbsp; &nbsp;window.setInterval("gd('.content','current')",2000);<br><br>&nbsp;&nbsp; &nbsp;<br>});<br><br>function gd(box,c)<br>{<br>&nbsp;&nbsp; &nbsp;var indexC=$("li."+c,box+" ul").index();&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;var indexM=$(box+" ul li").length-1;<br>&nbsp;&nbsp; &nbsp;var indexN=indexC&lt;indexM?indexC+1:0;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(box+" ul li."+c).removeClass(c);<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(box+" ul li").eq(indexN).addClass(c);&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var text=$(".text");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text.html("");<br>&nbsp;&nbsp; &nbsp;for(i=1;i&lt;=indexM+1;i++){<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var con = i==indexN+1?'&lt;span class="current" &gt;'+i+'&lt;/span&gt;':'&lt;span&gt;'+i+'&lt;/span&gt;'<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text.append(con);&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;}<br><br>&nbsp;&nbsp; &nbsp;var right=$(window).width()-($(box).offset().left+$(box).width());<br>&nbsp;&nbsp; &nbsp;var top=$(box).offset().top+$(box).height()-27;<br>&nbsp;&nbsp; &nbsp;text.css({"right":right,"top":top});&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".text span",box).mouseover(function(){<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var indexC = $(this).index();<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".content ul li.current").removeClass("current");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".content ul li").eq(indexC+1).addClass("current");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br><br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(".text span.current").removeClass("current");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(this).addClass("current");<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;});<br>&nbsp;&nbsp; &nbsp;<br><br>}<br><br>&lt;/script&gt;<br>&lt;style type="text/css"&gt;<br><br>body,h1,h2,span,ul,li,dl,dd,dt,input,div,form,img{<br>&nbsp;&nbsp; &nbsp;margin:0;<br>&nbsp;&nbsp; &nbsp;padding:0;<br>}<br>.content{<br>&nbsp;&nbsp; &nbsp;width:540px;<br>&nbsp;&nbsp; &nbsp;height:290px;<br>&nbsp;&nbsp; &nbsp;margin:0 auto;<br>}<br>ul li{<br>&nbsp;&nbsp; &nbsp;list-style-type:none;<br>}<br>.content ul li{<br>&nbsp;&nbsp; &nbsp;list-style:none;<br>&nbsp;&nbsp; &nbsp;display:none;<br>}<br>.content ul li.current{<br>&nbsp;&nbsp; &nbsp;display:block;<br>}<br>.text{<br>&nbsp;&nbsp; &nbsp;z-index:999;<br>&nbsp;&nbsp; &nbsp;width:540px;<br>&nbsp;&nbsp; &nbsp;height:27px;<br>&nbsp;&nbsp; &nbsp;position:absolute;<br>&nbsp;&nbsp; &nbsp;text-align: right;<br>}<br>.text span{<br>&nbsp;&nbsp; &nbsp;display: inline-block;<br>&nbsp;&nbsp; &nbsp;width:25px;<br>&nbsp;&nbsp; &nbsp;height:25px;<br>&nbsp;&nbsp; &nbsp;line-height:25px;<br>&nbsp;&nbsp; &nbsp;border:1px solid #ccc;<br>&nbsp;&nbsp; &nbsp;background:#fff;<br>&nbsp;&nbsp; &nbsp;margin-right:3px;<br>&nbsp;&nbsp; &nbsp;text-align:center;<br>&nbsp;&nbsp; &nbsp;color:#ccc;<br>&nbsp;&nbsp; &nbsp;cursor:pointer;<br>}<br>.text span.current{<br>&nbsp;&nbsp; &nbsp;background:#333;<br>&nbsp;&nbsp; &nbsp;color:#fff;<br>}<br><br>&lt;/style&gt;<br>&lt;/head&gt;<br><br>&lt;body&gt;<br><br>&nbsp;&nbsp;&nbsp; &lt;div class="content"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li class="current"&gt;&lt;a href="#"&gt;&lt;img src="images/01.jpg" title="我是第一张图片" /&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/02.jpg" title="我是第2张图片" /&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/03.jpg" title="我是第3张图片" /&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/04.jpg" title="我是第4张图片" /&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/05.jpg" title="我是第5张图片" /&gt;&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="text"&gt;&lt;/div&gt;<br>&nbsp;&nbsp; &nbsp;<br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br><br><br>&lt;/body&gt;<br>&lt;/html&gt;<br><br>

评论 ( 3 )
最新评论
lian8306 2011-11-01 15:08:36 3F

有个效果图就好了

大冬瓜 2011-04-16 12:56:44 2F

     就是有点 我在改改

蜗牛 2011-04-15 17:38:26 1F

在FF 下  有问题把?lz