首页> 攻略教程> JS实现图片新闻切换效果

JS实现图片新闻切换效果

2023-08-10 12:40:01来源：8624软件园作者：8624软件园

实例名称

JS实现图片新闻切换效果

实例描述

新闻切换技术想必大家都很熟悉，本例研究其切换效果如何实现。

实例代码

htmlheadstyle type="text/css"body text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;div，form，img，ul，ol，li，dl，dt，dd margin: 0; padding: 0; border: 0;h1，h2，h3，h4，h5，h6 margin:0; padding:0;table，td，tr，thfont-size:12px;a:link color: #000; text-decoration:none;a:visited color: #83006f;text-decoration:none;a:hover color: #c00; text-decoration:underline;a:active color: #000;.focusPicmargin:0 auto; width:244px;.focusPic .picmargin:0 auto; width:240px; height:180px; padding:2px 0 0;.focusPic .adPicmargin:0 auto 5px; width:240px; height:29px; overflow:hidden;background:url;.focusPic .adPic .textfloat:right; padding:9px 4px 0 0; width:140px;.focusPic .adPic .text acolor:#1f3a87;.focusPic .adPic .text a:hovercolor:#bc2931;.focusPic h2 float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;.focusPic pfloat:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;.focusPic p img margin:0px 0 2px;.focusPic .more margin:0 auto; width:240px; .focusPic .more .textNumfloat:right; margin:0 8px 0 0;padding:0 0 4px;.focusPic .more .textNum .textfloat:left; font-weight:bold; padding:7px 6px 0 0; color:#666;.focusPic .more .textNum .numfloat:left; width:113px; height:19px;.focusPic .more .textNum .bg1 background:url;.focusPic .more .textNum .bg2 background:url;.focusPic .more .textNum .bg3 background:url;.focusPic .more .textNum .bg4 background:url;.focusPic .more .textNum .num ul float:left; width:113px;.focusPic .more .textNum .num lifloat:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;.focusPic .more .textNum .num li acolor:#fff; padding:0 5px; .focusPic .more .textNum .num li a:visitedcolor:#fff;.focusPic .more .textNum .num li a:hovercolor:#ff0;/styleu00a0script language="JavaScript" type="text/javascript"var nn;nn=1;setTimeout'change_img'，6000;function change_imgu00a0ifnn4 nn=1u00a0setTimeout'setFocus1'+nn+''，6000;u00a0nn++;u00a0tt=setTimeout'change_img'，6000;function setFocus1iu00a0selectLayer1i;function selectLayer1iu00a0switchiu00a0u00a0case 1:u00a0"focusPic1".="block";u00a0"focusPic2".="none";u00a0"focusPic3".="none";u00a0"focusPic4".="none";u00a0"focusPic1nav".="block";u00a0"focusPic2nav".="none";u00a0"focusPic3nav".="none";u00a0"focusPic4nav".="none";u00a0break;u00a0case 2:u00a0"focusPic1".="none";u00a0"focusPic2".="block";u00a0"focusPic3".="none";u00a0"focusPic4".="none";u00a0"focusPic1nav".="none";u00a0"focusPic2nav".="block";u00a0"focusPic3nav".="none";u00a0"focusPic4nav".="none";u00a0break;u00a0case 3:u00a0"focusPic1".="none";u00a0"focusPic2".="none";u00a0"focusPic3".="block";u00a0"focusPic4".="none";u00a0"focusPic1nav".="none";u00a0"focusPic2nav".="none";u00a0"focusPic3nav".="block";u00a0"focusPic4nav".="none";u00a0break;u00a0case 4:u00a0"focusPic1".="none";u00a0"focusPic2".="none";u00a0"focusPic3".="none";u00a0"focusPic4".="block";u00a0"focusPic1nav".="none";u00a0"focusPic2nav".="none";u00a0"focusPic3nav".="none";u00a0"focusPic4nav".="block";u00a0break;u00a0/script/head

bodyu00a0div class="focusPic"u00a0div id="focusPic1" style="display:block ;"u00a0div class="pic" a href=""img src= alt="Facebook或年内曲线入华" width="240" height="180" border="0" //a /divu00a0h2a href=""Facebook或年内曲线入华/a/h2u00a0p有分析称，Facebook入华不外乎两条途径：一是成立合资公司，二是合作、收购。点击进入查看……img src="/" alt="详细" width="3" height="5" / a href= class="cDRed"详细/a/pu00a0/divu00a0div id="focusPic2" style="display: none ;"u00a0div class="pic" a href=""img src= alt="颠覆丛林动物生存法则" width="240" height="180" border="0" //a /divu00a0h2a href=""颠覆丛林动物生存法则/a/h2u00a0p群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是弱肉强食的。img src="/" alt="详细" width="3" height="5" / a href="" class="cDRed"详细/a/pu00a0/divu00a0div id="focusPic3" style="display: none ;"u00a0div class="pic" a href=""img src="" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" //a /divu00a0h2a href=""WAPI并非贸易阴谋/a/h2u00a0p近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明WAPI标准并非是贸易阴谋。img src="/" alt="详细" width="3" height="5" / a href="" class="cDRed"详细/a/pu00a0/divu00a0div id="focusPic4" style="display: none ;"u00a0div class="pic" a href=""img src= alt="新视野号探测冥王星特别专题" width="240" height="180" border="0" //a /divu00a0h2a href=""新视野号探测冥王星特别专题/a/h2u00a0p美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥王星。img src="/" alt="详细" width="3" height="5" / a href= class="cDRed"详细/a/pu00a0/divu00a0div class="more"u00a0div class="textNum"u00a0div class="text"gt; 更多头图新闻/divu00a0div class="num bg1" id="focusPic1nav" style="display: block;"u00a0ulu00a0li1/liu00a0lia href="javascript:setFocus12;" target="_self"2/a/liu00a0lia href="javascript:setFocus13;" target="_self"3/a/liu00a0lia href="javascript:setFocus14;" target="_self"4/a/liu00a0/ulu00a0/divu00a0div class="num bg2" id="focusPic2nav" style="display: none;"u00a0ulu00a0lia href="javascript:setFocus11;" target="_self"1/a/liu00a0li2/liu00a0lia href="javascript:setFocus13;" target="_self"3/a/liu00a0lia href="javascript:setFocus14;" target="_self"4/a/liu00a0/ulu00a0/divu00a0div class="num bg3" id="focusPic3nav" style="display: none;"u00a0ulu00a0lia href="javascript:setFocus11;" target="_self"1/a/liu00a0lia href="javascript:setFocus12;" target="_self"2/a/liu00a0li3/liu00a0lia href="javascript:setFocus14;" target="_self"4/a/liu00a0/ulu00a0/divu00a0div class="num bg4" id="focusPic4nav" style="display: none;"u00a0ulu00a0lia href="javascript:setFocus11;" target="_self"1/a/liu00a0lia href="javascript:setFocus12;" target="_self"2/a/liu00a0lia href="javascript:setFocus13;" target="_self"3/a/liu00a0li4/liu00a0/ulu00a0/divu00a0/divu00a0/divu00a0/div

/body/html需要在bodyr中添加一些新闻，注意这些新闻的布局。

运行效果