Mrxn分享本博客的幻灯片样式小计--气死 -_- |

2015-6-26 / 0 评论 emlog / Mrxn

本文共计 5722 字,感谢您的耐心浏览与评论.

Mrxn分享本博客的幻灯片样式小计--气死 -_- |

QQ截图20150626235257.png

喜欢的就按照以下步骤折腾:


代码是借助封装js代码msclass进行修改,需要修改三个文件:module.php,head.php,index.php或者log_list.php。具体代码修改如下:

一、在

module .php

文件底部加入如下代码




<?php
    //slide数据源
            //定义函数,只有一个参数$num,即为调用的数据条数
    function get_flash_data_img($num){
            //面向对象中静态方法实例化数据库对象(我是这么理解的)
            $db = MySql::getInstance();
            //下面是数据库语句,即获取gid,title,data,content等内容,非隐藏,时间正序,总共$num条数据,按照时间排序(包括首页置顶和分类置顶)
            $sql = "SELECT gid,title,date,content FROM ".DB_PREFIX."blog inner join ".DB_PREFIX."sort WHERE hide='n' AND type='blog' AND top='y' | sortop='y' AND sortid=sid order by date DESC LIMIT 0,$num";
            // $sql = "SELECT gid,title,date,content FROM ".DB_PREFIX."blog WHERE hide='n' ORDER BY `date` DESC LIMIT 0,$num";
     $go = $db->query($sql);
                    //开始循环进行显示
                    while($row = $db->fetch_array($go)){
       $img_url = '';
                            //picthumb()函数为获取文章附件图片的函数,后面会补上
                            //如果附件中含有图片,那么$img_url就等于附件图片的地址
                            if(picthumb($row['gid'])){
        $img_url = picthumb($row['gid']);
                            //pin_thumb()函数为获取文章中图片链接的函数,后面会补上
                            //如果附件中不含图片,但是文章中有外链图片,则$img_url等于外链图片的地址
                            }elseif(pic_thumb($row['content'])){
        $img_url = pic_thumb($row['content']);
                            //如果以上两种情况都没有图片,那么$img_url就等于默认图片
                            //如下默认图片的路径是模板路径下images文件夹下的default_flash.jpg文件
                            }else{
        $img_url = TEMPLATE_URL.'images/default_flash.jpg';
       }
                            //下面这一句是非常关键的,$data即为我们上面步骤所说的数据
                            //第二步骤中我们知道格式为“<b><span style="color:#e53333;"><div><img src="图片地址1" rel="external nofollow"  rel="external nofollow"  stitle="标题名1" slink="链接地址1" /></div></span></b>”
                            //如下格式必须和上面步骤中提取出来的数据格式一致。如果是不同的幻灯片插件,只需此处的格式不同而已。
                            $data1 = '<li><img src="'.$img_url.'" rel="external nofollow"  rel="external nofollow"  stitle="'.$row['title'].'" slink="'.Url::log($row['gid']).'" /></li>';
          $data2 = '<li><a href="'.Url::log($row['gid']).'" rel="external nofollow"  rel="external nofollow" >'.$row['title'].'</a></li>';
                            //最后打印出数据,由于当前代码的位置是在while的循环体,因此会循环$num条数据
          ?>
    <li><a href="<?php echo Url::log($row['gid']); ?>" rel="external nofollow"  rel="external nofollow" ><img src="<?php echo $img_url; ?>" rel="external nofollow"  alt="<?php echo $row['title']; ?>" width="510" height="280" /></a></li>
      <?php } ?>
    <?php } ?>
    <?php
    //slide数据源
            //定义函数,只有一个参数$num,即为调用的数据条数
    function get_flash_data_art($num){
            //面向对象中静态方法实例化数据库对象
            $db = MySql::getInstance();
            //下面是数据库语句,即获取gid,title,data,content等内容,非隐藏,时间正序,总共$num条数据,按照时间排序(包括首页置顶和分类置顶)
            $sql = "SELECT gid,title,date,content FROM ".DB_PREFIX."blog WHERE hide='n' AND type='blog' AND top='y' | sortop='y' AND sortid=sid order by date DESC LIMIT 0,$num";
            // $sql = "SELECT gid,title,date,content FROM ".DB_PREFIX."blog WHERE hide='n' ORDER BY `date` DESC LIMIT 0,$num";
     $go = $db->query($sql);
                    //开始循环进行显示
                    while($row = $db->fetch_array($go)){
       $img_url = '';
                            //picthumb()函数为获取文章附件图片的函数,后面会补上
                            //如果附件中含有图片,那么$img_url就等于附件图片的地址
                            if(picthumb($row['gid'])){
        $img_url = picthumb($row['gid']);
                            //pin_thumb()函数为获取文章中图片链接的函数,后面会补上
                            //如果附件中不含图片,但是文章中有外链图片,则$img_url等于外链图片的地址
                            }elseif(pic_thumb($row['content'])){
        $img_url = pic_thumb($row['content']);
                            //如果以上两种情况都没有图片,那么$img_url就等于默认图片
                            //如下默认图片的路径是模板路径下images文件夹下的default_flash.jpg文件
                            }else{
        $img_url = TEMPLATE_URL.'images/default_flash.jpg';
       }
                            //下面这一句是非常关键的,$data即为我们上面步骤所说的数据
                            //第二步骤中我们知道格式为“<b><span style="color:#e53333;"><div><img src="图片地址1" rel="external nofollow"  rel="external nofollow"  stitle="标题名1" slink="链接地址1" /></div></span></b>”
                            //如下格式必须和上面步骤中提取出来的数据格式一致。如果是不同的幻灯片插件,只需此处的格式不同而已。
         $data1 = '<li><img src="'.$img_url.'" rel="external nofollow"  rel="external nofollow"  stitle="'.$row['title'].'" slink="'.Url::log($row['gid']).'"></li>';
          $data2 = '<li><a href="'.Url::log($row['gid']).'" rel="external nofollow"  rel="external nofollow" >'.$row['title'].'</a></li>';
                            //最后打印出数据,由于当前代码的位置是在while的循环体,因此会循环$num条数据
          ?>
    <li class=""><a href="<?php echo Url::log($row['gid']); ?>" rel="external nofollow"  rel="external nofollow" ><?php echo $row['title']; ?></a></li>
      <?php } ?>
    <?php } ?>
    <?php
    //get thumbs(获取附件图片)
    function picthumb($blogid) {
        $db = MySql::getInstance();
        $sql = "SELECT * FROM ".DB_PREFIX."attachment WHERE blogid=".$blogid." AND (`filepath` LIKE '%jpg' OR `filepath` LIKE '%gif' OR `filepath` LIKE '%png') ORDER BY `aid` ASC LIMIT 0,1";
    //    die($sql);
     $imgs = $db->query($sql);
        while($row = $db->fetch_array($imgs)){
             $pict.= ''.BLOG_URL.substr($row['filepath'],3,strlen($row['filepath'])).'';
        }
        return $pict;
    }
    ?>
    <?php
    //get thumbs(获取图片链接)
    function pic_thumb($content){
        //preg_match_all全局匹配content中的图片地址,并存入$img变量
        preg_match_all("|<img[^>]+src=\"([^>\"]+)\"?[^>]*>|is", $content, $img);
        //当图片存在时,获取第一张图片,地址保存在$imgsrc中
        $imgsrc = !empty($img[1]) ? $img[1][0] : '';
     if($imgsrc):
      return $imgsrc;
     endif;
    }
    ?>

二、在

head.php

引入封装js特效代码:




<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/MSClass.js" rel="external nofollow"  language="javascript"></scrip

三、在

index.php

或者

log_list.php

添加调用参数:




<script type="text/javascript">
    function $(id){return document.getElementById(id)};
    </script>
         <div id="focusPic">
          <div id="focusLeft"><ul id="focuscontent"><?php echo get_flash_data_img(10); ?></ul></div>
          <div id="focusTitle"><ul id="focusMenu"><?php echo get_flash_data_art(10); ?></ul></div>
        <div class="clear"></div>
     </div>
       <script type="text/javascript">
    new Marquee(
    {
     MSClassID : "focusLeft",
     ContentID : "focuscontent",
     TabID   : "focusMenu",
     Direction : 0,
     Step   : 0.3,
     Width   : 515,
     Height   : 280,
     Timer   : 20,
     DelayTime : 3000,
     WaitTime  : 0,
     ScrollStep: 280,
     SwitchType: 0,
     AutoStart : 1,
    })
    </script>

最后,附加css样式表,在首页css样式表文件中加入如下样式表代码:



#focusPic{width:100%; height:300px; margin:0 auto; clear:both; text-align:center; padding:0px;background-color:#ffffff;}
    #focusPic ul{margin:0;padding:0;border:0}
    #focusPic #focusTitle{width:300px; float:right; font-size:12px; text-align:left;}
    #focusPic #focusTitle li{height:28px; line-height:28px; background:url(images/focusTitleBg.gif) left 0 no-repeat; cursor:pointer; font-size:12px; padding-left:20px;overflow:hidden;}
    #focusPic #focusMenu li.active{background-position:0 -29px; font-weight:bold;}
    #focusPic #focusMenu li.active a{color:#f2f2f2;}
    #focusPic #focusLeft{width:515px; height:280px; overflow:hidden; float:left;margin-top: 5px;}
    #focusPic #focusLeft #focuscontent li{width:515px;height:280px; overflow:hidden;}

附件可以在这里下载,或者是自己 Ctrl+U 下载 : MSClass.js.7z.zip

最后感谢 简爱Finally 提供的友情帮助  思密达! -_- ||


标签: 编程 代码 JS emlog

转载:转载请注明原文链接 - Mrxn分享本博客的幻灯片样式小计--气死 -_- |


0条回应:“Mrxn分享本博客的幻灯片样式小计--气死 -_- |”


发表评论

{view_code_no}