微西风博客

当前位置:网站首页 / Zblog教程 / 正文

给你的博客增加幻灯片功能,不会的赶快点进来

  鄙人觉得无论是网站还是博客都有必要增加一个幻灯片展示功能,眼下你随便看一下各大网站,淘宝网、政府网站、包括国家电网银行官网哪一个没有幻灯片展示?甚至展示的图片一个比一个大,幻灯片的位置是访客进入网站最容易第一眼看见的地方,比你文字形式的公告展现要优秀太多。

  我这个博客主题是在应用中心下载的,本身是没有幻灯片展示功能。不过增加一个幻灯片简直不要太简单。就是在需要展示的地方添加上一段代码,或者将代码保存为一个文件,然后再需要展示的位置调用就可以了。同理,不仅可以实现幻灯片功能,你还可以插入视频、音乐、等等。说白了就是添加和调用了一段代码。

QQ截图20151208191405.jpg

给博客首页增加幻灯片功能

<style type="text/css"> 
.ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img { 
margin : 0; 
padding : 0; 
border : 0; 
} 
.ppt-container { 
width : 680px; /*根据展示图片的大小在这里设置容器的width和height*/ 
height : 250px; 
position : relative; 
} 
.ppt-container img { 
width : 100%; 
height : 100%; 
} 
.ppt-container .hide { 
display : none; 
} 
.ppt-container ul.image-list li { 
position : absolute; 
top : 0px; 
left : 20px; 
} 
.ppt-container ul.button-list { 
list-style : none; 
position : absolute; 
right : 20px; 
bottom : 20px; 
} 
.ppt-container ul.button-list li { 
float : left; 
padding-right : 10px; 
} 
.ppt-container ul.button-list span { 
background : #E5E5E5; 
padding : 1px 7px; 
line-height : 20px; 
font-size : 13px; 
display : block; 
cursor : default; 
} 
.ppt-container ul.button-list span.selected { 
color : #FFF; 
background : #FF7000; 
} 
</style> 
<script type="text/javascript"> 
$(function() { 
var iCountOfImage = 3; // 共三张图片 
var iPreIndex = 0; // 上一次索引位置 
$(".ppt-container ul.button-list li span").click(function() { 
var iIndex = $(this).attr("data-index"); 
if(iIndex == iPreIndex) { 
return; // 点击了当前图片,不切换 
} 

$(".ppt-container .image-list li[data-index="+ iIndex +"]").fadeIn(1500); 
$(".ppt-container .image-list li[data-index="+ iPreIndex +"]").fadeOut(1500); 
iPreIndex = iIndex; 
$(".ppt-container .button-list span").removeClass("selected"); 
$(this).addClass("selected"); 
}); 
setInterval(function() { // 自动播放,每5秒触发一次单击事件,来播放幻灯片 
var iNextIndex = (iPreIndex + 1) % iCountOfImage; 
$(".ppt-container ul.button-list li span[data-index="+ iNextIndex +"]").click(); 
}, 8888); 
}); 
</script> 
</head> 
<body> 
<div class="ppt-container"> 
<ul class="image-list"> 
<li data-index="0"><img src="/photos/top1.png"/></li> 
<li data-index="1" class="hide"><img src="/photos/top2.png"/></li> 
<li data-index="2" class="hide"><img src="/photos/top3.png"/></li> 
</ul> 
<ul class="button-list"> 
<li><span data-index="0" class="selected">微</span></li> 
<li><span data-index="1">西</span></li> 
<li><span data-index="2">风</span></li> 
</ul> 
</div>

使用方法:

  将以上代码复制到你博客的首页列表文件中,拿ZblogPhp来说复制到post-multi.php文件中即可。但是这有个弊端就是除了首页以外所有分类下都会展示这个幻灯片,于是我琢磨出了一个办法。将以上代码保存为了post-istop.php,post-istop是zblog置顶文件。这样我们在后台随便写一篇文章然后可以选择是首页置顶还是全局置顶,当然这篇文章连个标题都不会显示出来。你也可以能会说,这样岂不是置顶功能失效了么?那么我问你,幻灯片难道替换不了置顶么?

  上面的代码可能有的朋友看了这篇文章幻灯片是出来了,但是不会修改尺寸和调用图片。那么我简单的说一下,上面的代码中第8行和第9行分别是幻灯片框的宽和高。73.74.75分别是三张图片的调用地址,这段代码图片没有链接功能你可以自行添加,删除一个图片请删掉75行,增加一个图片复制75行然后将<li data-index="2" class="hide">中的2改成3即可,以此类推数量不限。

叽里咕噜:

  上面的幻灯片代码是最简单的一种,你可以自行编写也可以在百度搜索“幻灯片插件”下载你所喜欢的样式,调用方式都差不多。最后送大家一句话:折腾爱出乱子,但是科技很有意思。

推荐阅读

文章标签: 建站技巧 Zblog教程

版权声明: 本文除特别说明外均由原创

本文链接: http://www.weixifeng.com/post/263.html,尊重共享,欢迎转载,请自觉添加本文链接,谢谢!

分享本文:

Hello!看完文章有何感想呢?
  • 无聊

    0

  • 流汗

    0

  • 嘿嘿

    0

  • 支持

    0

  • 疑问

    0

已有10位网友发表了看法:

头像
1Lboke112导航  2015-12-11 16:45:37 回复Ta
多一个幻灯片功能,立马高大上很多
头像
1L649533269  2015-12-11 21:00:30 回复Ta
@boke112导航 是的,等有需要展现的内容会用上的。
头像
2L江西养牛人  2015-12-10 14:35:58 回复Ta
你这速度也太快了吧,我就顺嘴说说罢了。
头像
2L649533269  2015-12-10 15:47:32 回复Ta
头像
3L赣州SEO  2015-12-09 21:56:52 回复Ta
恩,博客弄个幻灯片确实好看一些
头像
4L微童年  2015-12-09 08:59:28 回复Ta
有折腾才有创新
头像
4L649533269  2015-12-09 09:50:52 回复Ta
@微童年 活到老,学到老
头像
5L江西养牛人  2015-12-08 20:26:46 回复Ta
旧颜换新貌呀,还是微西风会折腾,看得我这不懂代码的人心里痒痒的。不过比之前那个模版耐看些了。
头像
5L649533269  2015-12-10 14:30:43 回复Ta
@江西养牛人 刚才那篇文章说上纲上线有点夸张了吧!别人投稿的我也没看,仔细一看确实有点胡搅蛮缠,给删了。
头像
5L649533269  2015-12-08 20:40:45 回复Ta
@江西养牛人 新年新气象,生命在于折腾

发表评论*(使用右侧的多说进行评论,外链是无Nofollow的哦!)

必填

选填

选填

◎请勿使用“IE模式”或者“IE浏览器”进行二次回复。上一篇  返回首页  下一篇

Top