«

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

时间:2015-6-26 23:05     作者:admin     分类: emlog


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

QQ截图20150626235257.png

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


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

一、在

module .php

文件底部加入如下代码




<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><?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" stitle="标题名1" slink="链接地址1" /></div></span></b>”
//如下格式必须和上面步骤中提取出来的数据格式一致。如果是不同的幻灯片插件,只需此处的格式不同而已。
$data1 = '<li><img src="'.$img_url.'" stitle="'.$row['title'].'" slink="'.Url::log($row['gid']).'" /></li>';
$data2 = '<li><a href="'.Url::log($row['gid']).'">'.$row['title'].'</a></li>';
//最后打印出数据,由于当前代码的位置是在while的循环体,因此会循环$num条数据
?>
<li><a href="<?php echo Url::log($row['gid']); ?>"><img src="<?php echo $img_url; ?>" 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" stitle="标题名1" slink="链接地址1" /></div></span></b>”
//如下格式必须和上面步骤中提取出来的数据格式一致。如果是不同的幻灯片插件,只需此处的格式不同而已。
$data1 = '<li><img src="'.$img_url.'" stitle="'.$row['title'].'" slink="'.Url::log($row['gid']).'"></li>';
$data2 = '<li><a href="'.Url::log($row['gid']).'">'.$row['title'].'</a></li>';
//最后打印出数据,由于当前代码的位置是在while的循环体,因此会循环$num条数据
?>
<li class=""><a href="<?php echo Url::log($row['gid']); ?>"><?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特效代码:




<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/MSClass.js" language="javascript"></scrip

三、在

index.php

或者

log_list.php

添加调用参数:




<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><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样式表文件中加入如下样式表代码:



<pre style="overflow:auto" ;class="prettyprint lang-css linenums">#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;}</pre>

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

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


标签: 编程 代码 JS emlog

版权所有:Mrxn's Blog
文章标题:Mrxn分享本博客的幻灯片样式小计--气死 -_- |
除非注明,文章均为 Mrxn's Blog 原创,请勿用于任何商业用途,转载请注明作者和出处 Mrxn's Blog

扫描二维码,在手机上阅读