效果图：
教程如下：
代码是借助封装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,content,date FROM ".DB_PREFIX."blog WHERE type='blog' and top='y' ORDER BY `top` DESC ,`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="420" 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,content,date FROM ".DB_PREFIX."blog WHERE type='blog' and top='y' ORDER BY `top` DESC ,`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特效代码：
<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/MSClass.js" language="javascript"></script>
三、在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 : 420,
Height : 280,
Timer : 20,
DelayTime : 3000,
WaitTime : 0,
ScrollStep: 280,
SwitchType: 0,
AutoStart : 1,
})
</script>
最后，附加css样式表，在首页css样式表文件中加入如下样式表代码：
#focusPic{width:720px; height:282px; margin:0 auto; clear:both; text-align:center; padding:0px;background-color:#ffffff;border:1px solid #c1c1c1;}
#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:420px; height:280px; overflow:hidden; float:left;}
#focusPic #focusLeft #focuscontent li{width:420px;height:280px; overflow:hidden;}
附件下载：
MSClass大小：7.5KB | 来源：本地下载
已经过安全软件检测无毒，请您放心下载。
[green]请将你要显示在幻灯片中的文章首页指定，否则无数据显示！[/green]
评论
737条评论... Lv.1
Chrome 75.0.3770.100 
Windows 回复
我需要这个
天津市 联通
Lv.1
Chrome 63.0.3239.132 
Windows 回复
三生三世
浙江省 电信
萧别离 Lv.1
Chrome 77.0.3865.90 
Windows 回复
来了
广东省广州市 联通
老男人棉裤 Lv.1
Chrome 62.0.3202.84 
Android 9 回复
麻将啊不是吧
广东省广州市 联通
啊龙游戏号 Lv.1
Chrome 57.0.2987.108 
Android 9 回复
特别好
浙江省金华市 移动