现在位置:首页 » 代码修改 »

关于心岛博客最新焦点图(幻灯片)样式代码分享

心岛发布于2013年06月12日  分类: 代码修改  浏览:9125 人次  评论:0 

昨天晚上搞了整整一晚上终于将本博客的焦点图替换了,换成了用户体验度更强的图文轮换效果,是不是很强悍?在此小编分享下代码!

QQ截图20130612134541.jpg

代码是借助封装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 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="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,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特效代码:






<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;}

当然,以上代码仅供参考!其实整体思路就是找到自己需要的幻灯片代码样式,然后在module.php中封装调用函数,之后模版引入js并进行调用即可!是不是很简单?

赞 (0次) 打赏
X
打赏方式:
  • 支付宝
  • 微信
  • QQ红包

打开支付宝扫一扫

本文由心岛原创或编辑,转载请保留链接【关于心岛博客最新焦点图(幻灯片)样式代码分享】http://www.liangxin.name/?post=353
本文百度已收录,点此查看详细信息
本文标签: js代码修改
上一篇: 给Emlog添加JS幻灯片功能的方法
下一篇:神十与“中国航天梦”
目前有 0 条评论