样例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......>
上传以下图片：
|
顶部 
加入收藏夹
2012-12-25 16:39:03 
已设置保密
回复
引用
报告
编辑
删除
