K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

分享一个7屏带缩略图幻灯

12Next >

marsnick 发表于：11-05-10 12:24 [添加收藏] 楼主 [回复] #Top#
marsnick 人气：29 积分：22 金币：188

分享一个7屏带缩略图幻灯[图1]
我也是KC新手，刚接触KC不到10天，此幻灯本是在网上找的，经我修改后能调用文章列表下的“头条”，调用的方式比较笨，不知是否还有更简单方便的调用方式。
有时间的可以在此基础上继续美化，比如幻灯播放到某一张的时候，小缩略图高亮显示等等..
有个小问题：下边的JS代码放置在***.js文件里幻灯就不显示，必须放置在页面里。如果谁有时间调整下。
==============以下代码放置在CSS文件里并===================
.jdtwenzi01{color:#ffffff;font-family:'黑体';font-size:16px}
.jdtwenzi01 a:link{color:#ffffff;font-family:'黑体';font-size:16px}
.jdtwenzi01 a:visited{color:#ffffff;font-family:'黑体';font-size:16px}
.jdtwenzi01 a:hover{color:#ffffff;font-family:'黑体';font-size:16px}
.jdtwenzi01 a:active{color:#ffffff;font-family:'黑体';font-size:16px}
#jdttext{padding-top:9px;z-index:100;position:absolute;top:361px;left:0px;width:294px;height:28px;font-family:'微软雅黑'; font-size:16px;}
.lh20{line-height:20px; background-color:#000000;filter:alpha(opacity=70)}
.textaligncenter{text-align:center;}


============以下代码放置在要显示的位置=====================
<table width="294" border="0" cellpadding="0" cellspacing="0">
     <tr valign="top">
       <td width="294" height="398">
      <div style="position:relative;width:294px;text-align:left">
                      <div style="position:absolute;top:0px;left:0px">
        <img style="cursor:hand;FILTER: BlendTrans(Duration=1);" src="/images/Foucsbg.jpg" width="294" height="398" name="imgInit" align="absmiddle" onclick="jdturl()"></div>
                      <div id="focustextBg"></div>
                      <div id="jdttext" class="lh20 textaligncenter jdtwenzi01"><a href="#" class="jdtwenzi01" target="_blank"></a></div>
                        </div>
                      </td>
                    </tr>
                    <tr bgcolor="#1C1C1C">
                      <td width="294" height="55" align="center">
                          <table border="0" align="center" cellpadding="0" cellspacing="0">
       <tr align=center>
        <td width="40" id="gdxt1" onclick="nextAdonclick(1)" class="gdxtNameOf" height="53">
        
        {king:article type="head" number="1"}
        <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer;" border="0" onmouseover="stopnextad(1)" onmouseout="startnextad()">            
        {/king}
        </td>
        <td id="gdxt2" onclick="nextAdonclick(2)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="1"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(2)" onmouseout="startnextad()">                   
        {/king}
        </td>
        <td id="gdxt3" onclick="nextAdonclick(3)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="2"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(3)" onmouseout="startnextad()">                   
        {/king}</td>
        <td id="gdxt4" onclick="nextAdonclick(4)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="3"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(4)" onmouseout="startnextad()">                   
        {/king}</td>
        <td id="gdxt5" onclick="nextAdonclick(5)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="4"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(5)" onmouseout="startnextad()">                   
        {/king}</td>
        <td id="gdxt6" onclick="nextAdonclick(6)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="5"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(6)" onmouseout="startnextad()">                   
        {/king}</td>
        <td id="gdxt7" onclick="nextAdonclick(7)" class="gdxtNameOf" width="40">
        {king:article type="head" number="1" next="6"}
            <img src="(king:image width="36" height="49" Position="top"/)" style="cursor:pointer" border="0" onmouseover="stopnextad(7)" onmouseout="startnextad()">                   
        {/king}</td>
       </tr>
              </table>
          </td>
        </tr>
</table>


<script type=text/javascript>
        
             var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true:false;
             var TimeOutaa=5000;             //每张图切换时间 (单位毫秒);
             var imgUrl=new Array();
             var imgLink=new Array();
             var imgtext=new Array();
             var adNum=0;
             var theTimer;
             var whichlink;
             {king:article type="head" number="1"}
             imgUrl[1]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="1"}
             imgUrl[2]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="2"}
             imgUrl[3]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="3"}
             imgUrl[4]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="4"}
             imgUrl[5]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="5"}
             imgUrl[6]='(king:image width="294" height="398" Position='top'/)';
             {/king}
             {king:article type="head" number="1" next="6"}
             imgUrl[7]='(king:image width="294" height="398" Position='top'/)';
             {/king}         
             {king:article type="head" number="1"}
             imgLink[1]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="1"}
             imgLink[2]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="2"}
             imgLink[3]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="3"}
             imgLink[4]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="4"}
             imgLink[5]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="5"}
             imgLink[6]='(king:path/)';
             {/king}
             {king:article type="head" number="1" next="6"}
             imgLink[7]='(king:path/)';
             {/king}      
             {king:article type="head" number="1"}
             imgtext[1]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="1"}
             imgtext[2]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="2"}
             imgtext[3]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="3"}
             imgtext[4]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="4"}
             imgtext[5]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="5"}
             imgtext[6]='(king:title size="30"/)';
             {/king}
             {king:article type="head" number="1" next="6"}
             imgtext[7]='(king:title size="30"/)';
             {/king} 
                        
             
             var count=0;
            function jdturl(){
              window.open(imgLink[whichlink]);
            }
            
            function chagncssname(nnn){//小图当前图片的样式
             for (i=1;i<8;i++){
              document.getElementById("gdxt"+i).className="gdxtNameOf";
             }              
             document.getElementById("gdxt"+nnn).className="gdxtNameOn";
                          
            }             
            function playTran(){
             if (isIE){
               imgInit.filters.BlendTrans.play();
              }
            }
            var key=0;
            
            //页面打开时的焦点图的程序开始
            
            function nextAd(){//页面打开时大图的切换
              if(adNum<(imgUrl.length-1)){
               adNum++;
              }else{
               adNum=1;
              }
              if(document.all){
               //imgInit.filters.BlendTrans.Transition=23;
               imgInit.filters.BlendTrans.apply();
               playTran();
              }
              whichlink=adNum;
              chagncssname(adNum)
              document.images.imgInit.src=imgUrl[adNum];
              document.getElementById("jdttext").innerHTML=imgtext[adNum];
              theTimer=setTimeout("nextAd()", TimeOutaa);
            }
            
           nextAd();
           function stopnextad(nnn){//停在滚动层时滚动层停止滚动程序
            document.getElementById("gdxt"+nnn).className="gdxtNameOn";
            clearTimeout(theTimer);
           }
           
           function startnextad(){//移出滚动层时滚动层开始滚动程序
            chagncssname(adNum);
            theTimer=setTimeout("nextAd()", TimeOutaa);
           }
           
           function nextAdonclick(nn){//点击小图的切换
              
              adNum=nn;
              if(document.all){
               //imgInit.filters.BlendTrans.Transition=23;
               imgInit.filters.BlendTrans.apply();
               playTran();
              }
              whichlink=adNum;
              chagncssname(adNum);
              document.images.imgInit.src=imgUrl[adNum];
              document.getElementById("jdttext").innerHTML=imgtext[adNum];
              
              
              
            }
            
            
           //页面打开时的焦点图的程序结束
          
        </script>

Ta最近还发表过 [分享] 分享一个7屏带缩略图幻灯 (12-08-29) [疑问] 求助，如何按照自定义表单的值调用 (12-03-16) [使用] TAG的使用方法 (12-03-05) [疑问] 求助更改编辑器路径后编辑器无法打开 (11-12-20) [错误] 发现BUG (11-05-11)
随机阅读 [分享] K9 V9.10.0021版本演示站点 (16-07-07) [建议] 便民服务电话后台极其不方便，进来看图 (14-08-24) [疑问] K9真相：谁有用K9做的网站欣赏下！谢谢！ (13-08-05) [分享] 关于kingcms 的内部流量统计功能 (12-04-13) [疑问] 在线订购的弹出窗口如何修改 (12-02-14)
气象万千 发表于：11-05-10 13:36 沙发 [回复] #Top#
气象万千 人气：140 积分：902 金币：4255
KC元老
收藏了。
lanrennet 发表于：11-05-10 14:41 板凳 [回复] #Top#
lanrennet 人气：113 积分：949 金币：5089
KC元老
分享一个7屏带缩略图幻灯[图1]分享一个7屏带缩略图幻灯[图2]
99huiyi 发表于：11-05-10 14:52 4楼 [回复] #Top#
99huiyi 人气：8 积分：155 金币：1031
很漂亮的效果，谢谢分享~
marsnick 发表于：11-05-10 21:11 5楼 [回复] #Top#
marsnick 人气：29 积分：22 金币：188
发现点问题，有时候图片与文章不同步，修改方法。
将var whichlink;下边的代码改一下

{king:article listid="sub" type="new" number="1"}
             imgUrl[1]='(king:image width="294" height="398"/)';
             imgLink[1]='(king:path/)';
             imgtext[1]='(king:title size="30"/)';
             {/king} 
             {king:article listid="sub" type="new" number="1" next="1"}
             imgUrl[2]='(king:image width="294" height="398"/)';
             imgLink[2]='(king:path/)';
             imgtext[2]='(king:title size="30"/)';
             {/king}
             {king:article listid="sub" type="new" number="1" next="2"}
             imgUrl[3]='(king:image width="294" height="398"/)';
             imgLink[3]='(king:path/)';
             imgtext[3]='(king:title size="30"/)';
             {/king}
             {king:article listid="sub" type="new" number="1" next="3"}
             imgUrl[4]='(king:image width="294" height="398"/)';
             imgLink[4]='(king:path/)';
             imgtext[4]='(king:title size="30"/)';
             {/king}
             {king:article listid="sub" type="new" number="1" next="4"}
             imgUrl[5]='(king:image width="294" height="398"/)';
             imgLink[5]='(king:path/)';
             imgtext[5]='(king:title size="30"/)';
             {/king}
             {king:article listid="sub" type="new" number="1" next="5"}
                 imgUrl[6]='(king:image width="294" height="398"/)';
             imgLink[6]='(king:path/)';
             imgtext[6]='(king:title size="30"/)';
             {/king} 
             {king:article listid="sub" type="new" number="1" next="6"}
             imgUrl[7]='(king:image width="294" height="398"/)';
             imgLink[7]='(king:path/)';
             imgtext[7]='(king:title size="30"/)';
             {/king} 
toymen 发表于：11-05-10 23:22 6楼 [回复] #Top#
toymen 人气：518 积分：3458 金币：23864
KC元老
太复杂了，为了这样一个效果
pktsandy 发表于：11-05-11 09:58 7楼 [回复] #Top#
pktsandy 人气：1181 积分：3438 金币：29313
VIP 管理团队 EST团队 技术精英 灌水狂人
9494好长呀
zongxiao08 发表于：11-05-11 15:41 8楼 [回复] #Top#
zongxiao08 人气：145 积分：1044 金币：3553
强大
saccerp 发表于：11-05-11 17:28 9楼 [回复] #Top#
saccerp 人气：15 积分：207 金币：401
太长了，简化一下就好~~~
gou360mend 发表于：11-05-23 10:04 11楼 [回复] #Top#
gou360mend 人气：151 积分：399 金币：1222
很长的说

12Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

广州唯众网络科技有限公司 粤ICP备08008106号

中奖了!