当前位置：文档之家› 网页图片滚动新闻代码

网页图片滚动新闻代码

自动切换的图片幻灯切换效果（图片滚动新闻）可自己修改滚动图片和增加滚动图片数量，以及修改滚动图片大小等！1.效果预览：2.代码部分：（将一下代码复制粘贴到记事本中，把后缀改成.html）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>三个jQuery版淡入淡出自动切换的图片幻灯切换效果_</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">/******************************** @基于jQuery 1.4的渐入渐出切换幻灯插件* @Plugin Page:/jq-plugin-ifadeslide/* @Author Mr.Think* @Author blog /* @Creation date: 2010.08.20*******************************//*reset css*/body{font-size:0.8em;letter-spacing:1px;font-family:"MS SansSerif",Geneva,sans-serif;line-height:1.8em;}div,h2,p,ul,li{margin:0;padding:0;}h1{font-size:1em;font-weight:normal;}h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none;}h1 a:hover{background:#a40000;color:#fff;text-decoration:underline;}h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative;}h5a{background:#000;color:#fff;text-decoration:none;font-size:12px;font-weight:normal;letter-spaci ng:3px;position:absolute;right:7px;top:7px;padding:1px 12px;}.box{width:700px;height:250px;}/*demo css*//*SAMPLE-A*/#slide{position:relative;width:200px;height:250px;overflow:hidden;border:1px solid #ccc;float:left;}#slide img{width:200px;height:250px;}#slide .ico{position:absolute;right:8px;bottom:6px;}#slide .ico li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide .ico li.high{background:#047;color:#fff;font-weight:bolder;}/*SAMPLE-B*/#slide_b{position:relative;width:460px;height:250px;overflow:hidden;border:1px solid #ccc;float:right ;}#slide_b img{width:500px;height:250px;}#slide_b .ico_b{position:absolute;right:8px;bottom:6px;}#slide_b .ico_b li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide_b .ico_b li.high_b{background:#a40000;color:#fff;font-weight:bolder;}/*SAMPLE-C*/#slide_c{position:relative;width:700px;height:250px;overflow:hidden;border:1px solid #ccc;margin-top:20px;}#slide_c img{width:700px;height:250px;}#slide_c .ico_c{position:absolute;right:8px;bottom:6px;}#slide_c .ico_c li{background:#fff;float:left;display:block;width:15px;height:15px;line-height:15px;border:1px solid#cecece;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:2px;padding:1px;cursor:po inter;}#slide_c .ico_c li.high{background:#000;color:#fff;font-weight:bolder;}</style><script src="/images/jquery-1.4.min.js"></script><!--<script src="/images/jquery.iFadeSldie.js">//开发版文件</script>--><script src="/js_img/4-14/images/jquery.iFadeSldie.pack.js">//压缩版文件</script><script language="javascript">/******************************** @基于jQuery淡入淡出可自动切换的幻灯插件* @jQuery V esion:1.4.2* @Plugin Page:/jq-plugin-ifadeslide/* @Author Mr.Think* @Author blog /* @Creation date: 2010.08.20*******************************///调用插件并传入插件参数//此处传入的参数将覆盖jquery.iFadeSlide.js的参数,为空即使用插件文件中默认参数$(function(){//SAMPLE-A调用---未传入任何参数,调用默认参数$('div#slide').iFadeSlide();//SAMPLE-B调用---传入新的参数,将覆盖原有参数,未传入的使用默认值$('div#slide_b').iFadeSlide({field: $('div#slide_b a'),icocon:$('div.ico_b'),hoverCls: 'high_b',curIndex: 2, //索引值0起始,故此处设置为第3项高亮interval: 2000});//SAMPLE-C调用---传入新的参数,将覆盖原有参数,未传入的使用默认值$('div#slide_c').iFadeSlide({field: $('div#slide_c img'),icocon: $('div.ico_c'),outTime:100,inTime: 200});});</script></head><body>预览效果时左下角会提示错误，而且看不到效果，<font color=red>刷新一下</font>就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

<br><!--把下面代码加到<body>与</body>之间--><div class="box"><!--SAMPLE-A--><div id="slide"><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"><div class="ico"></div></div><!--SAMPLE-A end--><!--SAMPLE-B--><div id="slide_b"><a href=""><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/03.jpg" title="demo" alt="demo"></a><a href=""><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"></a><div class="ico_b"></div></div><!--SAMPLE-B end--></div><!--SAMPLE-C--><div id="slide_c"><img src="/js_img/8-24/images/01.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/02.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/03.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/04.jpg" title="demo" alt="demo"><img src="/js_img/8-24/images/05.jpg" title="demo" alt="demo"><div class="ico_c"></div></div><!--SAMPLE-C end--></body></html>。

相关主题

相关文档推荐：