样例009
一、如何建立测试页面参考2楼。本层简化教程。
二、代码来源于:http://js.alixixi.com/a/2009090857981.shtml
三、下载压缩包,解压后得到index.html文件、css.css文件、jquery.js文件、文件夹images。
四、记事本打开index.html,获得如下代码:
<html> <head runat="server"> <title>jqueryflash - by alixixi.com</title> <link type="text/css" rel="Stylesheet" href="css.css" /> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var currentIndex = 0; var DEMO; //函数对象 var currentID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $("#ifocus_piclist li").eq(0).show(); //默认 autoScroll(); $("#ifocus_btn li").hover(function() { StopScrolll(); $("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式 $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示 $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏 $("#ifocus_tx li").hide(); $("#ifocus_tx li").eq(pictureID).show();
}, function() { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 currentIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { $("#ifocus_btn li:last").removeClass("current"); $("#ifocus_tx li:last").hide(); $("#ifocus_btn li").eq(currentIndex).addClass("current"); $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current"); $("#ifocus_tx li").eq(currentIndex).show(); $("#ifocus_tx li").eq(currentIndex - 1).hide(); $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow"); $("#ifocus_piclist li").eq(currentIndex - 1).hide(); currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex; DEMO = setTimeout(autoScroll, 2000); } function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(DEMO); } }); </script> </head> <body> 您的位置:<a href="http://www.alixixi.com/">阿里西西</a> > <a href="http://js.alixixi.com/">网页特效</a> > <a href="http://js.alixixi.com/c/guanggao_1.shtml">广告代码</a> <hr /> <div id="confirm"></div> <!-- 区块一开始 --> <div class="content1"> <div class="top"></div> <div class="main cl"> <!-- FLASH切换图开始 --> <div class="l_flash_pic"> <div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" style="left:0; top:0;"> <ul> <li><a href="http://js.alixixi.com/" target="_blank"><img src="images/center.jpg" alt="校园模特招聘" /></a></li> <li><a href="http://js.alixixi.com/" target="_blank"><img src="images/02.jpg" alt="alixixi.com广告代码收集,http://js.alixixi.com" /></a></li> <li><a href="http://js.alixixi.com/" target="_blank"><img src="images/03.jpg" alt="alixixi.com广告代码收集,http://js.alixixi.com" /></a></li> <li><a href="http://www.alixixi.com/" target="_blank"><img src="images/04.jpg" alt="alixixi.com广告代码收集,http://js.alixixi.com" /></a></li> </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> <li class="current">校园模特招聘</li> <li class="normal">alixixi说明2</li> <li class="normal">阿里西西说明3</li> <li class="normal">您自定义说明4</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current" id="p0"><img src="images/center.jpg" alt="" /></li> <li id="p1"><img src="images/btn_02.jpg" alt="" /></li> <li id="p2"><img src="images/btn_03.jpg" alt="" /></li> <li id="p3"><img src="images/btn_04.jpg" alt="" /></li> </ul> </div> </div> </div> <!-- FLASH切换图结束 --> </div> </div> <!-- 区块一结束 --> </body> </html> |
五、以上红色代码为head区需要载入3个部分:css文件+js文件+代码;蓝色代码粘贴到需要显示的正文引用代码。
5.1、压缩包中的css.css文件,复制粘贴重命名flash009.css,粘贴至D:\EmpireServer\web\huandengpian\huandengpian009文件夹。 5.2、压缩包中的jquery.js文件,复制粘贴重命名flash009.js,粘贴至D:\EmpireServer\web\huandengpian\huandengpian009文件夹。 5.3、至于head区域内的代码,扫了一眼,基本都不需要修改。
以上5.1+5.2+5.3,处理head区得到的结果如下:
<head> <link type="text/css" rel="Stylesheet" href="flash009.css" /> <script src="flash009.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function() { var currentIndex = 0; var DEMO; //函数对象 var currentID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $("#ifocus_piclist li").eq(0).show(); //默认 autoScroll(); $("#ifocus_btn li").hover(function() { StopScrolll(); $("#ifocus_btn li").removeClass("current")//所有的li去掉当前的样式加上正常的样式 $(this).addClass("current"); //而本身则加上当前的样式去掉正常的样式 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 $("#ifocus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示 $("#ifocus_piclist li").not($("#ifocus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏 $("#ifocus_tx li").hide(); $("#ifocus_tx li").eq(pictureID).show();
}, function() { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 currentID = $(this).attr("id"); //取当前元素的ID pictureID = currentID.substring(currentID.length - 1); //取最后一个字符 currentIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { $("#ifocus_btn li:last").removeClass("current"); $("#ifocus_tx li:last").hide(); $("#ifocus_btn li").eq(currentIndex).addClass("current"); $("#ifocus_btn li").eq(currentIndex - 1).removeClass("current"); $("#ifocus_tx li").eq(currentIndex).show(); $("#ifocus_tx li").eq(currentIndex - 1).hide(); $("#ifocus_piclist li").eq(currentIndex).fadeIn("slow"); $("#ifocus_piclist li").eq(currentIndex - 1).hide(); currentIndex++; currentIndex = currentIndex >= 4 ? 0 : currentIndex; DEMO = setTimeout(autoScroll, 2000); } function StopScrolll()//当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(DEMO); } }); </script> </head> |
六、处理正文引用代码,得到如下结果
<div id="confirm"></div> <!-- 区块一开始 --> <div class="content1"> <div class="top"></div> <div class="main cl"> <!-- FLASH切换图开始 --> <div class="l_flash_pic"> <div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" style="left:0; top:0;"> <ul> [e:loop={0,4,3,1}]<li> <a href="<?=$bqsr['titleurl']?>" target="_blank"> <img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" /></a></li>[/e:loop] </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> [e:loop={0,4,3,1}] <?php $check_current1='normal'; if($bqno==1) { $check_current1='current'; } ?> <li class="<?=$check_current1?>"><?=$bqr['title']?></li>
[/e:loop] </ul> </div> </div> <div id="ifocus_btn"> <ul> [e:loop={0,4,3,1}] <?php $check_current2=''; if($bqno==1) { $check_current2='current'; } ?> <li class="<?=$check_current2?>" id="p<?=$bqno-1?>"><a href="<?=$bqsr['titleurl']?>" target="_blank"><img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" /></a></li>
[/e:loop] </ul> </div> </div> </div> <!-- FLASH切换图结束 --> </div> </div> <!-- 区块一结束 --> |
特别注意,对比原代码,可以看到一共有3个li标记,其中第2个和第3个li标记中时有class的。这里直接给出了处理结果。(详细解释本楼最下面会发出来,建议大家自己看看。)
七、前面给出的案例中,建议过大家都看看images文件夹,因为里面也许会引用到一些图片。本案例中可以看到images文件夹中有一个ifocus_btn_bg.gif图片文件。 复制粘贴重命名为flash009.gif,粘贴至D:\EmpireServer\web\huandengpian\huandengpian009文件夹。 同时,打开flash009.css,修改对应的图片路径。(不会?会不会搜索一下ifocus_btn_bg.gif?还不会我也没办法了)
八、建议大家自己动手做一下这个示例。能做出来,基本上就可以毕业了。
九、如同第七点所述:建议完成这些工作后,打开所有的js以及css文件,检查一遍代码是否还引用了网站的JS文件。 我本机上的其他样例里面,就发现有这种情况: 之前做好的样例,过几天重新检查时,发觉在一个js文件内引入了xunlei音乐频道的js文件,直接就是http://music.xunlei........。
==============================================================
最后关于这个案例中有3个<li>标记,其中第2个和第3个都有class的处理办法。
<?php $check_current1='normal'; //定义一个变量check_current1为normal if($bqno==1) //如果是第一条引入数据 { $check_current1='current'; //则check_cerrcnt1为current } ?> 使用<li class="<?=$check_current1?>">......>得到如下结果: <li class=current......> <li class=normal......> <li class=normal......> <li class=normal......>
上传以下图片:
|