JQuery轻松实现新闻幻灯片！

最新推荐文章于 2021-06-04 10:15:33 发布

lsunwing

最新推荐文章于 2021-06-04 10:15:33 发布

阅读量2.7k

点赞数

分类专栏： # JavaScript 文章标签： jquery div class function stylesheet javascript

本文链接：https://blog.csdn.net/lsunwing/article/details/4982344

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

准备工作：

1.jquery.js

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

本实例的目录如下：

|— jquery.js

|— index.html

|— style.css

|— images

|— news1.jpg

|— news2.jpg

|— ...

CSS样式表：

.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; }

页面+JS代码：

<html> <head> <title>JQuery实现新闻幻灯片切换</title> <link type="text/css" rel="stylesheet" href="style.css" mce_href="style.css" /> <script language="javascript" src="jquery.js" ></script> <script language="javascript"> $(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<=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>0;i--){ $("#news"+i).stop().animate({opacity: '0'},10); } } setInterval(xunhuan,5000); function xunhuan(){ if(current < 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"); } } } ); </script> </head> <body> <div class="news"> <div id="news1"></div> <div id="news2"></div> <div id="news3"></div> <div id="news4"></div> <div id="news5"></div> <div class="label">5</div> <div class="label">4</div> <div class="label">3</div> <div class="label">2</div> <div class="label">1</div> </div> </body> </html>

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

lsunwing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery轻松实现新闻幻灯片！

技术不在于知道，而在于使用！把简单的知识融合起来，再加上自己的一点点想法，这就是做技术的人所必须的职业精神！废话少说，进入今天的主题——JQuery实现新闻幻灯片切换效果！准备工作：1.jquery.js2.五张300*180px的图片，分别命名为：news1.jpg, news2.jpg ... ... 本实例的目录如下： |— j
复制链接

扫一扫

专栏目录