帝国论坛帝国网站管理系统交流区帝国CMS使用交流[教程+样例]如何给帝国添加幻灯片(5个样例—增加xml教程) 【本版专题贴子】  
 2/7    |‹ ‹‹ 1 2 3 4 5 6 7 ›› ›|
主题:[教程+样例]如何给帝国添加幻灯片(5个样例—增加xml教程) [加入收藏夹]   

bebebe
用户头衔:探花

精华贴   :0
发贴数   :2692
经验值   :6789
注册时间:2010-03-01
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 11 楼]

支持楼主,学习了




2012-12-25 16:39:03 已设置保密 顶部 回复 引用 报告 编辑 删除

jidiansi
用户头衔:书生

精华贴   :0
发贴数   :7
经验值   :53
注册时间:2012-12-22
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 12 楼]

好文章,必须要顶啊,多谢分享



痔疮的最佳治疗偏方
治痔疮用什么药
痔疮的症状
http://www.yaozhibk.com
2012-12-25 17:56:16 已设置保密 顶部 回复 引用 报告 编辑 删除

春哥
用户头衔:进士

精华贴   :0
发贴数   :1630
经验值   :4591
注册时间:2009-01-02
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 13 楼]

不错




2012-12-25 19:18:43 已设置保密 顶部 回复 引用 报告 编辑 删除

城市孤星
用户头衔:探花

精华贴   :0
发贴数   :7446
经验值   :16630
注册时间:2007-12-26
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 14 楼]

支持分享




2012-12-26 08:11:55 已设置保密 顶部 回复 引用 报告 编辑 删除

usetxt
用户头衔:秀才

精华贴   :0
发贴数   :101
经验值   :467
注册时间:2012-08-10
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 15 楼]

样例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> &gt; <a href="http://js.alixixi.com/">网页特效</a> &gt; <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......>



上传以下图片:


[该贴被修改 4 次,最后修改时间 2012-12-27 21:15:19 ]



2012-12-27 19:36:39 已设置保密 顶部 回复 引用 报告 编辑 删除

cnnb
用户头衔:探花

精华贴   :0
发贴数   :5876
经验值   :16756
注册时间:2008-10-14
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 16 楼]

支持楼主




2012-12-28 09:10:47 已设置保密 顶部 回复 引用 报告 编辑 删除

html高手
用户头衔:探花

精华贴   :0
发贴数   :9114
经验值   :23336
注册时间:2008-02-23
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 17 楼]

支持一下




2012-12-28 09:44:02 已设置保密 顶部 回复 引用 报告 编辑 删除

chaosa
用户头衔:书生

精华贴   :0
发贴数   :39
经验值   :257
注册时间:2010-05-20
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 18 楼]

辛苦辛苦




2012-12-28 19:15:50 已设置保密 顶部 回复 引用 报告 编辑 删除

usetxt
用户头衔:秀才

精华贴   :0
发贴数   :101
经验值   :467
注册时间:2012-08-10
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 19 楼]

样例011-KinSlideshow幻灯片插件

推荐。因为可控的参数比较多,也很容易上手使用。

一、网络来源于http://www.lanrentuku.com/js/jiaodiantu-794.html
原作者为Mr.Kin。在测试代码时出现一个小问题,致信给Mr.Kin,很快得到解答了。特别鸣谢!

二、下载压缩包后,记事本打开index.html,获得代码。
(省略多余代码,以下红色为head区,蓝色为引用区

<script src="js/jquery-1.4a2.min.js" type="text/javascript"></script>
<script src="js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
        $("#KinSlideshow").KinSlideshow();
})
</script>


    <div id="KinSlideshow" style="visibility:hidden;">
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/1.jpg" alt="这是标题一" width="600" height="300" /></a>
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/2.jpg" alt="这是标题二" width="600" height="300" /></a>
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/3.jpg" alt="这是标题三" width="600" height="300" /></a>
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/4.jpg" alt="这是标题四" width="600" height="300" /></a>
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/5.jpg" alt="这是标题五" width="600" height="300" /></a>
        <a href="http://www.lanrentuku.com" target="_blank"><img src="images/6.jpg" alt="这是标题六" width="600" height="300" /></a>
    </div>


三、解压出来的文件夹中,JS文件夹有3个文件,jquery.KinSlideshow-1.1.js是无用的(应该是个旧版本的),弃之。
另外两个文件分别命名为flash011-1.js和flash011-2.js,放入文件夹D:\EmpireServer\web\huandengpian\huandengpian011中。
head区域载入如下:
<head>
<script src="flash011-1.js" type="text/javascript"></script>
<script src="flash011-2.js" type="text/javascript"></script>
</head>


四、head还需要定义幻灯片的样式,原代码为
<script type="text/javascript">
$(function(){
        $("#KinSlideshow").KinSlideshow();
})
</script>

修改如下(同样放置在head区域):
<script type="text/javascript">
$(function(){
        $("#KinSlideshow").KinSlideshow({
                mouseEvent:"mouseover",
                titleFont:{TitleFont_size:14,TitleFont_color:"#ffffff",TitleFont_family:"Verdana",TitleFont_weight:"bold"},
                });
})
</script>

这里修改了鼠标的触发,以及标题颜色。

五、具体参数。
(粘贴过来的不知道为什么不能发)
请打开解压文件包中的demo2.html就可以看到了,具体修改参照第四点。

六、正文区域修改代码如下:

    <div id="KinSlideshow" style="visibility:hidden;">

[e:loop={0,4,3,1}]<a href="<?=$bqsr['titleurl']?>" target="_blank"><img src="<?=$bqr['titlepic']?>" alt="<?=$bqr['title']?>" width="600" height="300" /></a>[/e:loop]

    </div>


七、最后特别需要注意
如果使用帝国cms,加载这个幻灯片插件的话。
帝国默认css中定义的title和插件有所冲突。如果不修改的话,显示标题的背景颜色为白色。
帝国默认css文件为:D:\EmpireServer\web\skin\default\css\style.css
(我在测试的时候,直接把css中的.title定义去掉,显示正常了。)

上传以下图片:


[该贴被修改 6 次,最后修改时间 2013-01-02 23:10:11 ]



2013-01-02 22:51:36 已设置保密 顶部 回复 引用 报告 编辑 删除

cpx2004
用户头衔:进士

精华贴   :0
发贴数   :571
经验值   :3004
注册时间:2007-10-14
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 20 楼]

支持楼主




2013-01-03 00:23:02 已设置保密 顶部 回复 引用 报告 编辑 删除
 2/7    |‹ ‹‹ 1 2 3 4 5 6 7 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by: EBB Version 2.2.1