WordPress不一样的幻灯片

/ 52评 / 3

很早就像给主题加一个幻灯片功能了,但是一直没找到心仪的幻灯样式,看到倡萌自留地哪里的幻灯片比较喜欢,但是由于个人技术不行,看了很久的Hcms主题代码都没看透,于是熬夜随意赶制这个不同寻常的幻灯片功能,感觉样子还算过的去,也很少在博客中看到这样的样式,有那么点小另类,但是效果在那里,我也无耻写个小教程,算是记录之,省的以后折腾主题又要重新摸索。

滑动式切换卡片,仅仅使用了很少一点的js和css,兼容IE6,效果十分不错

因为主题各不相同,我在这里仅以Weisay & Hicms两款主题为例

下载幻灯所必须的文件,请点击这里

下载后解压得到slider.php和slider.js,将这个两个文件上传到主题目录内

在主题的想要插入幻灯的地方中插入该功能:

<?php include(TEMPLATEPATH . '/slider.php'); //幻灯片 ?>

一般插入改功能的地方为“首页模板(常见为index.php或者loop.php)”

slider.php文件的相对路径,如果你将slider.php上传在了主题目录下的 “a” 文件夹下,那么调用时,需要变为用“/a/slider.php”

然后再在主题中引用js文件,编辑主题header.php文件,并在</head>标签结束前,插入下方代码:

<script src="<?php bloginfo('template_directory'); ?>/slider.js"></script>

 完成后,将下方css样式复制到主题的style.css内:

/*幻灯片*/
li{list-style:none;}
a:link,a:visited,a:active{color:#333;text-decoration:none;}
a:hover{color:#08A5E0;}
.pic img{width:210px;height:200px;}
#box{width:700px;margin:10px auto;}
#container{position:relative;height:172px;z-index:0;}
#container .item{position:absolute;top:0;left:0;width:492px;height:174px;overflow:hidden;background:#FFF;border:1px solid #ddd;z-index:1;opacity:1;}
#container .item .pic{float:left;width:210px;height:150px;display:inline;margin:10px;}
#container .item .pic img{width:210px;height:150px;vertical-align:top;padding:1px;border:1px solid #CCC;}
#container .item .txt{float:left;width:250px;margin-top:12px;}
#control{height:20px;text-align:center;}
#control span{width:30px;height:5px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;}
#control span.active{background-color:#848484;border:1px solid #6E6E6E;}

完成上方操作后,刷新看一下吧,样式可能不适合你的主题,你自己慢慢修改吧,嘿嘿

特别提醒,此幻灯片已开启timthumb.php自动图片裁剪功能,如果不需要,可以打开slider.php,在第8行,删除掉“<?php bloginfo('template_directory'); ?>/timthumb.php?w=210&h=150&src=”即可

  1. 蘑菇天空说道:

    厉害啊! 🙂

  2. Xider说道:

    :mrgreen: :mrgreen: 这效果我喜欢

  3. 南寻说道:

    效果不错,挺酷的~ 😳

  4. 小思说道:

    真hi~~

  5. 哼哼猪说道:

    确实有点小另类,话说你logo上面怎么有个白条

  6. oyoy说道:

    这技术男又发飙了

    • Tokin说道:

      @oyoy 这个东西还需改进,,我打算给我主题改版一下,正好元旦有时间折腾,这两天补课,这个要先放一下了

  7. 飘零说道:

    幻灯片非常酷哇

    • Tokin说道:

      @飘零 还好吧,搜了一堆代码,就是打开的有点慢,要在网页打开后等上2秒左右才能展开全部选项卡,有空我仔细研究一下,看看能不能再提速提速

  8. 无名说道:

    你的效果演示捏?点击图片没有反应啊 😮

  9. 有没有演示效果?

  10. 木头怀说道:

    不错,来瞅瞅

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注