远方的海
远方的海,WordPress,免费
2014 Sep 22 02 : 37

WordPress首页非插件实现幻灯效果

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

本站首页加上了一个Orbit jQuery slider,即轮播焦点图幻灯。实现这个可以调用插件,但是插件调用一般是按照分类里面的文章调用,选择性太小,所以不喜欢插件的我还是找到的免插件的实现方法。

DEMO

样式如下:是不是看起来很棒?本站的样式是根据原版改的所以略有不同。

WordPress首页非插件实现幻灯效果

你可以在本站首页查看DEMO,也可以去orbit官网查看效果:查看DEMO

下载地址

官方下载地址:点击下载

经过Sven美化过的版本,下载地址:点击下载

使用方法

加载一个酷炫的幻灯需要四个步骤先:

  1. 加载jQuery(一般主体都已经加载好了吧,大多数可以免去)
  2. 加载html代码
  3. 加载script脚本
  4. 加以css样式美化

1.下载解压后的文件夹我们可以得到js文件,css文件,和图片素材。首先加载js,已经加载jQuery的同学们就不需要再加载了。

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

2.加载css:

<link rel="stylesheet" href="css/orbit.css">

3.加载html文件,以本站为例:

<div id="featured">
 <a class="orbit-item" href="http://www.seavia.com/category/wordpress" data-caption="#htmlCaption1"><img src="//www.seavia.com/wp-content/uploads/2014/09/wordpress.jpg" alt="img1"></a>
 <a class="orbit-item" href="http://www.seavia.com/category/website-building-resources" data-caption="#htmlCaption2"><img src="//www.seavia.com/wp-content/uploads/2014/09/jianzhan.jpg" alt="img1"></a>
 <a class="orbit-item" href="#" data-caption="#htmlCaption3"><img src="//www.seavia.com/wp-content/uploads/2014/09/front.jpg" alt="img1"></a>
<span class="orbit-caption" id="htmlCaption1">一大波WordPress最新资讯正在靠近!</span>
 <span class="orbit-caption" id="htmlCaption2">建站资源大集合怎么可以错过!</span>
 <span class="orbit-caption" id="htmlCaption3">看脸的年代,不学点前端怎么出来混?</span>
 </div>

4.最后再加载一下script就好了!

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

最后还是要说,每个人的样式不可能上来就调好成最完美的,需要慢慢折腾。

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress 前端

您可能也会喜欢

发表回复

Post Comment


  1. 同盟源 :

    jQuery的东东,我喜欢 ;-)

    2015-1-5
    • Sven水神 :

      是啊,大家都加载了jQuery,省事~~

      2015-1-6
  2. 陌小雨 :

    感谢分享!

    2014-12-8
  3. 吴尼玛 :

    谢谢分享 ;-)

    2014-11-22
  4. wu1yi2fan :

    刚好可以加在正在写的那个主题上面。哈哈。

    2014-11-8
    • 远方的海水神 :

      我现在用的就是这个!js代码短,跑的快!

      2014-11-9
  5. JV :

    这个很简洁,我也用来试试。

    2014-9-29
    • 远方的海水神 :

      这个我觉得效果挺不错,js代码又短。

      2014-9-30
  6. Timle :

    赞一个,博主技术帝呀,从你建博客开始我就经常来看,一直看到你的博客版面结构及css的调整,越来越棒。要向你学习呀。我就好多搞不定的。

    2014-9-23
    • 远方的海水神 :

      谢谢,我也是很多不懂,自己也在慢慢学。

      2014-9-23
  7. IT疯狂女 :

    嘿嘿,谢谢博主的分享,以后会常来的。

    2014-9-22
    • 远方的海水神 :

      嘿嘿,我最爱回头客了。已经回访!

      2014-9-22
  8. 香港大宽带服务器 :

    谢谢博主的分享,很有用的。对了,有需要空间、服务器的可以了解下恒创的,俗话说货比三家。

    2014-9-22
    • 远方的海水神 :

      恒创的确实不错。你看我文章页面都有你们恒创的广告了…

      2014-9-22
  9. 免费部落 :

    我的主题本来就有这个,后来去掉了!

    2014-9-22
    • 远方的海水神 :

      部落菌喜欢删繁就简!

      2014-9-22
      • 免费部落 :

        是的,第一速度上,第二用户感觉会更好!

        2014-9-29