WordPress非插件实现Orbit幻灯片效果

Timle.CN:专注 WordPress建站WordPress主题WordPress插件 分享,同时也关注各种 建站资源前端技巧免费资源IT互联网热点 。CTRL+D即可收藏本站,我们期待您的再次光临!

[文章目录]

这年头,几乎常规的网站都有幻灯片;没有反而显得不高档了。今天介绍一个图片滑动幻灯片jQuery 插件,名字叫 Orbit,自定义功能很强大却是轻量级(仅仅4kb 左右)。接下来介绍一下并提供个添加到WordPress 主题的教程。

Orbit 简介

orbit-jquery-image-slider

Orbit是一个设计良好并且容易使用的jQuery 图片滑动幻灯片插件,它除了支持图片滚动切换展示外,还支持针对内容的滚动。插件的定制性相当高,它提供了多个参数的设置,通过设置你可以将它打造成完全符合你要求的样式。 Orbit支持 IE7+, FF3.5+, Chrome、Safari 等浏览器,整个插件十分轻巧,仅仅4kb 左右,需要jQuery 1.5.1版本以上。

插件官方主页: 点击前往

演示页面: 点击查看

幻灯片jQuery插件Orbit 集成到WordPress 主题教程

看官方,Orbit最新的版本(1.3.0)貌似集成到某个框架去了,我们可以使用旧版本(1.2.3)。

下载所需要的文件:官方下载    百度网盘

下载解压后,将这个文件夹重命名为orbit,放到WordPress 主题目录下(当然,你可以自定义路径,以下以此为准)。

一、确保你的WordPress 主题已经加载jQuery 库,注意是要1.5.1 版本以上的。

二、首先将下面的代码放到主题的header.php(具体哪里知道吧),这是加载CSS、js 文件的代码:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/orbit/orbit-1.2.3.css">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/orbit/jquery.orbit-1.2.3.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>

三、HTML 部分。幻灯片一般都是在首页加载的,对于WordPress 主题,可以通过if 语气判断是否在首页来写入html。

<?php if ( is_home() ){ ?>
<div id="featured">
<a href=”#” data-caption="#htmlCaption1"><img src="/1.jpg" /></a>
<a href=”#” data-caption="#htmlCaption2"><img src="/2.jpg" /></a>
<a href=”#” data-caption="#htmlCaption3"><img src="/3.jpg" /></a>
<a href=”#” data-caption="#htmlCaption4"><img src="/4.jpg" /></a>
<span class="orbit-caption" id="htmlCaption1">title1</span>
<span class="orbit-caption" id="htmlCaption2">title2</span>
<span class="orbit-caption" id="htmlCaption3">title3</span>
<span class="orbit-caption" id="htmlCaption4">title4</span>
</div>
<?php } ?>

对于上面的代码,你需要做的很多。比如再添加一个幻灯片、比如链接的url、图片的路径等等,这里仅仅算是一个演示。

为了适合于你的主题,你可以通过orbit-1.2.3.css 修改相关代码自定义样式,比如宽高神马的。

而对于幻灯片的相关参数设置,你可以去查阅官方文档自行解决。

折腾这个需要你懂html、CSS,javascript 或者jquery 略懂一点就可以了,~jquery 插件就是方便,不一定要你看懂代码,会用就行。

版权声明:本站所有文章和资源使用CC BY-NC-SA 3.0 CN协议发布,转载应当以相同方式注明并注明文章来自“Timle.CN -> WordPress非插件实现Orbit幻灯片效果”。在页面右边可以分享本文哦!

有 12 发吐槽 关于 “WordPress非插件实现Orbit幻灯片效果

  1. 沙发
    Tim 2015-06-18
    支持楼主,支持Timle.CN,以后经常来! :wink: :wink:
  2. 板凳
    kouss 2015-06-18
    我正好缺一个幻灯片。 :mrgreen:
    • 回复
      Timle.CN 2015-06-18
      @kouss 可以试试这个,好用,我也刚弄上去,首页的这个就是。
  3. 地板
    Sven 2015-06-19
    我这边打开你的网站 所有的图片都加载不出来 表情也是
    • 回复
      Timle.CN 2015-06-20
      @Sven 西部数码的香港虚拟主机,就是经常出问题。过两天换到万网去,不过要备案,估计要关站十多天。
      • 回复
        sven 2015-06-20
        @Timle.CN 可以试试七牛缓存图片CDN : http://www.seavia.com/wordpress/wordpress-qiniu-cdn-without-plugins.html
        • 回复
          Timle.CN 2015-06-20
          @sven 早就想弄到七牛去的,转完服务器就准备开始弄,还有2天现在用的西数服务器就到期了,申请了万网免费2年的服务器来用。
  4. 4楼
    傅远林博客 2015-06-21
    我想问一下,你博文中的目录效果是用的插件么,什么插件?
    • 回复
      Timle.CN 2015-06-21
      @傅远林博客 不是用的插件,是用的代码实现的。过两天我把免插件实现目录的方式发出来。
  5. 5楼
    pianfangba 2015-06-23
    very good !
  6. 6楼
    同盟源 2015-07-10
    这个效果不错,收下了
  7. 7楼
    fuzzz 2016-05-3
    博主 为何我幻灯片滑动速度调了没用 只有竖向滑动有用 fade, horizontal-slide, horizontal-push都没用
    • 回复
      Timle.CN 2016-05-3
      @fuzzz 刚刚试了下,正常可以使用的。可以试试JS加载上调用jquery.orbit-1.2.3.js :smile:

疑问 难过 胜利 微笑 抠鼻 可爱 抓狂 偷笑 奋斗 衰 撇嘴 色 贼笑 爬虫 鼓掌 发怒 擦汗 握手 酷 玫瑰 哭 呲牙

WordPress非插件实现Orbit幻灯片效果
8 票, 5.00 平均等级 ( 99% 分 )