txxg 发表于 2014-6-20 00:26:59

让这个效果在discuz显示出来？

请问老师 这个效果图如何让他在DISCUZ中显示出来，他的JS代码我该放到那个文件里去，在自定义HTML代码里我如何调用他们，并让他们显示出来，这个变量$是替换该脚本程序文件夹，JS文件夹里面那个js程序？麻烦老师了。

admin 发表于 2014-6-20 16:04:39

将以下代码加入到DIY模板里面去
<style type="text/css">
/* 初始化CSS */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
input { padding-top:0; padding-left:0; padding-bottom:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box }
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
table { border-collapse:collapse; }
body { background:#fff; color:#333; padding:5px 0; font:12px/20px "宋体"; }
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { zoom:1; }
.clearit { clear:both; height:0; font-size:0; overflow:hidden; }
a { color:#056ea1; text-decoration:none; }
a:visited { color:#056ea1; }
a:hover, a:active, a:focus { color:#f00; text-decoration:underline; }
a.linkRed:link, a.linkRed:visited { color:#f00!important; }/* 红色 */
a.linkRed:hover { color:#c00!important; }
a.linkRed01:link, a.linkRed01:visited { color:red!important }
a.linkRed01:hover { color:red!important }
/* 焦点图 */
.focus{overflow:hidden; zoom:1; min-width:950px; background:url(img/video_0921_04.png) repeat-x}
.focus_body{background:url(img/video_0921_05.png) no-repeat center top}
.scroll{ width:950px; margin:0 auto; position:relative; padding-top:16px;}
.scroll .t, .arr_left, .arr_right,.scroll_txt{position:absolute;}
.arr_left{ width:45px; height:70px; cursor:pointer; line-height:400px; overflow:hidden; left:0; top:135px;background:url(img/video_0921_arrow_left.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_arrow_left.png');_background:none;}
.arr_right{ width:45px; height:70px; cursor:pointer; line-height:400px; overflow:hidden; right:0; top:135px;background:url(img/video_0921_arrow_right.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_arrow_right.png');_background:none;}
.scroll .t{width:145px; height:36px; cursor:pointer;overflow:hidden; left:-10px; top:16px;background:url(img/video_1220_zyc_dsj_logo.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_1220_zyc_dsj_logo.png');_background:none;}
.scroll .box{float:left; width:944px;}
.scroll_cont{ border:solid 3px #fff; width:944px; height:342px}
.numList{ vertical-align:middle; text-align:center; padding:8px; }
.numList span{display: inline-block; width:25px; height:0; padding-top:8px; border:solid 1px #5e5e5e; margin-right:5px; background:#0f0f0f; cursor:pointer; line-height:0; font-size:0}
.numList span.selected{border:solid 1px #333; background:#fff}
.scroll_txt{ left:660px; top:11px;}
.scroll_txt .txtbg{ position:absolute;width:257px; height:390px;left:0; top:0;background:url(img/video_0921_txtbg.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_txtbg.png');_background:none;}
.scroll_txt .txtcontent{ position:absolute;left:34px; top:60px; color:#ccc; width:210px}
.scroll_txt .txtcontent h2{ font-size:20px; color:#ccc; font-family:黑体; line-height:24px; padding:0 0 5px;}
.scroll_txt .txtcontent p{ padding:5px 0;}
.scroll_txt .txtcontent p span{ color:#2d84be;}
.scroll_txt .txtcontent .btn{ text-align:center; padding:10px}
.scroll_txt .txtcontent .btn a{ background:url(img/video_0921_02.png) no-repeat 0 -250px; width:94px; height:25px; display:block; margin:0 auto; cursor:pointer; line-height:400px; overflow:hidden}
.txtcontent h2 a { color:#ccc;}
.txtcontent h2 a:hover { color:#fff; text-decoration:none;}
.txtcontent h2 a:visited { color:#ccc;}
.playList{ float:right;width:308px; overflow:hidden;}
.playList li{ width:290px; height:80px; padding-left:18px; background:url(img/video_0815_01.png) no-repeat}
.playList li.active{ background-position:0 -80px}
.playList li h3{ color:#333; font-size:16px; font-family:"微软雅黑", "黑体"; line-height:30px;}
.playList li a, .playList li a:visited, .playList li a:hover{color:#333}
.playList li p{ color:#898989; padding-right:9px}
.playList li.active a, .playList li.active a:visited, .playList li.active a:hover, .playList li.active p{ color:#fff;}

</style>


<div class="focus">
   <div class="focus_body">
    <!--焦点图 begin -->
        <div class="scroll">

      <a href="javascript:void(0);" class="arr_left" id="FS_arr_left_01">左移动</a>
      <a href="javascript:void(0);" class="arr_right" id="FS_arr_right_01">右移动</a>
      <div class="scroll_cont" id="FS_Cont_01">
          
   <div class="box">
              <a href="{url}" target="_blank"><img alt="{title}" src="images/U6764P167T518D1F20340DT20140307122230.jpg" /></a>
   </div>
          
       

      </div>
      <div id="FS_numList_01" class="numList"></div>
      <div class="scroll_txt">
       
        <div id="txt01" class="scroll_info" style="display:block">
            <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
       

       
        <div id="txt02" class="scroll_info" style="display:none">
         <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

        <div id="txt03" class="scroll_info" style="display:none">
               <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

       
        <div id="txt04" class="scroll_info" style="display:none">
               <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
                   

        <div id="txt05" class="scroll_info" style="display:none">
                <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

        <div id="txt06" class="scroll_info" style="display:none">
                <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

        <div id="txt07" class="scroll_info" style="display:none">
               <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

        <div id="txt08" class="scroll_info" style="display:none">
               <div class="txtbg"></div>
            <div class="txtcontent">
              <h2><a href="{url}" target="_blank">{title}</a></h2>
            <p>{title}</p>
            <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
            <div class="btn"><a href="{url}" target="_blank">播放</a></div>
         </div>
    </div>
               

      </div>
   </div>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/zzsc.js"></script>
    <script language="javascript" type="text/javascript">
                          <!--//--><![CDATA[//><!--
                          jQuery.noConflict();
                       var jq=jQuery;
                          var focusScroll_01 = new ScrollPic();
                          focusScroll_01.scrollContId   = "FS_Cont_01"; //内容容器ID
                          focusScroll_01.arrLeftId      = "FS_arr_left_01";//左箭头ID
                          focusScroll_01.arrRightId   = "FS_arr_right_01"; //右箭头ID

                          focusScroll_01.dotListId      = "FS_numList_01";//点列表ID
                          focusScroll_01.dotClassName   = "";//点className
                          focusScroll_01.dotOnClassName        = "selected";//当前点className
                          focusScroll_01.listType                = "number";//列表类型(number:数字，其它为空)
                          focusScroll_01.listEvent      = "onmouseover"; //切换事件

                          focusScroll_01.frameWidth   = 944;//显示框宽度
                          focusScroll_01.pageWidth      = 944; //翻页宽度
                          focusScroll_01.upright      = false; //垂直滚动
                          focusScroll_01.speed          = 10; //移动速度(单位毫秒，越小越快)
                          focusScroll_01.space          = 50; //每次移动像素(单位px，越大越快)
                          focusScroll_01.autoPlay       = true; //自动播放
                          focusScroll_01.autoPlayTime   = 5; //自动播放间隔时间(秒)
                          focusScroll_01.circularly   = true;
                          focusScroll_01.initialize(); //初始化
                          focusScroll_01.onpagechange = function(){
                          jq(".scroll_info").hide();
                          jq("#txt0"+(focusScroll_01.pageIndex+1)).show();
                          };

                          //--><!]]>
                </script>

    <!--焦点图 end -->
    </div>
   </div>
下载压缩包文件，解压后的JS文件上传到网站根目录！


效果就实现了！

txxg 发表于 2014-6-20 21:06:33

老师是不是放在自定义HTML框架里面？

txxg 发表于 2014-6-20 21:36:42

老师效果是显示出来了 但是他只在右下角，显示只出了一半该附件图片。

txxg 发表于 2014-6-20 23:40:35

您给的东西我在一年前都已经学完了

admin 发表于 2014-6-21 08:06:22

txxg 发表于 2014-6-20 13:06
老师是不是放在自定义HTML框架里面？

不是 ，
步骤如下

DIY

框架

帖子模块


更改模块模板


就可以了
页: [1]
查看完整版本: 让这个效果在discuz显示出来？