JQuery轻松实现新闻幻灯片！

    技术不在于知道，而在于使用！

 

把简单的知识融合起来，再加上自己的一点点想法，这就是做技术的人所必须的职业精神！

 

废话少说，进入今天的主题——JQuery实现新闻幻灯片切换效果！

 

准备工作：

1.jquery.js

2.五张300*180px的图片，分别命名为：news1.jpg, news2.jpg ...  ...

 

本实例的目录如下：

 

|— jquery.js

|— index.html

|— style.css

|— images

      |— news1.jpg

      |— news2.jpg

      |— ...

 

CSS样式表：

<textarea cols="50" rows="15" name="code" class="css:nocontrols">.news{ width:300px; height:180px; border:1px solid #66CCFF; } .label{ width:25px; height:15px; border:1px solid #66CCFF; border-right:0px; border-bottom:0px; font-size:12px; line-height:15px; text-align:center; float:right; margin-top:165px; } .bgcolor{ background-color:#66CCFF; } #news1{ width:300px; height:180px; position:absolute; background-image:url(images/news1.jpg); z-index:-999; } #news2{ width:300px; height:180px; position:absolute; background-image:url(images/news2.jpg); z-index:-999; } #news3{ width:300px; height:180px; position:absolute; background-image:url(images/news3.jpg); z-index:-999; } #news4{ width:300px; height:180px; position:absolute; background-image:url(images/news4.jpg); z-index:-999; } #news5{ width:300px; height:180px; position:absolute; background-image:url(images/news5.jpg); z-index:-999; }</textarea>

 

页面+JS代码：

<textarea cols="87" rows="15" name="code" class="c-sharp">&lt;html&gt; &lt;head&gt; &lt;title&gt;JQuery实现新闻幻灯片切换&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="style.css" mce_href="style.css" /&gt; &lt;script language="javascript" src="jquery.js" &gt;&lt;/script&gt; &lt;script language="javascript"&gt; $(document).ready( function(){ var current = 1; var labelArr = $("div.label"); hideAll(); $("#news1").stop().animate({opacity: '1'},300); $("div.label").eq(labelArr.length-current).addClass("bgcolor"); for(var i=1;i&lt;=labelArr.length;i++){ $("div.label").eq(labelArr.length-i).bind('mouseover',{k:i},function(event){ if(event.data.k != current){ $("#news"+current).stop().animate({opacity: '0'},300); $("#news"+event.data.k).stop().animate({opacity: '1'},300); } $("div.label").eq(labelArr.length-event.data.k).addClass("bgcolor"); $("div.label").eq(labelArr.length-current).removeClass("bgcolor"); current = event.data.k; } ); } function hideAll(){ for(var i=5;i&gt;0;i--){ $("#news"+i).stop().animate({opacity: '0'},10); } } setInterval(xunhuan,5000); function xunhuan(){ if(current &lt; 5){ $("#news"+current).stop().animate({opacity: '0'},300); $("div.label").eq(labelArr.length-current).removeClass("bgcolor"); current++; $("#news"+current).stop().animate({opacity: '1'},300); $("div.label").eq(labelArr.length-current).addClass("bgcolor"); }else{ $("#news"+current).stop().animate({opacity: '0'},300); $("div.label").eq(labelArr.length-current).removeClass("bgcolor"); current = 1; $("#news"+current).stop().animate({opacity: '1'},300); $("div.label").eq(labelArr.length-current).addClass("bgcolor"); } } } ); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="news"&gt; &lt;div id="news1"&gt;&lt;/div&gt; &lt;div id="news2"&gt;&lt;/div&gt; &lt;div id="news3"&gt;&lt;/div&gt; &lt;div id="news4"&gt;&lt;/div&gt; &lt;div id="news5"&gt;&lt;/div&gt; &lt;div class="label"&gt;5&lt;/div&gt; &lt;div class="label"&gt;4&lt;/div&gt; &lt;div class="label"&gt;3&lt;/div&gt; &lt;div class="label"&gt;2&lt;/div&gt; &lt;div class="label"&gt;1&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</textarea>

 

转帖请注明出处：http://blog.csdn.net/lsunwing/archive/2009/12/10/4982344.aspx