bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。
在介绍 bxSlider 使用之前,先看下 bxSlider 演示(RSS 用户需要返回网站查看):
WordPress:企业建站利器 WordPress 是一款风靡全球的开源 CMS 系统。在过去,它更多的应用于开设个人或多用户博客系统;但现在,它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一,自从2006年初次接触 WordPress 系统开始,我就为其强大的功能,灵活的可扩展性,以及方便的可定制性所深深吸引。
美国虚拟主机推荐:Bluehost Bluehost 建立于 1996 年,已经具有了十几年的虚拟主机服务经验,现已突破 100 万的网站托管数量,并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑,在美国是深受好评的虚拟主机,在美国主机界也是屡获大奖。
bbPress 介绍,安装和中文包 bbPress 是一款开源论坛程序,它是一个非常容易使用的轻量级论坛程序,由于 bbPress 保持了体积小,重量轻,没有提供过多复杂的功能,所以速度非常快。对于有更多需求的用户来说,bbPress 也和 WordPress 一样提供了一个非常强大插件系统,让你添加各种功能扩充论坛。
WordPress 相关日志插件:WordPress Related Posts 产生相关日志最好的方法就是通过 Tag,根据日志含有相同的 Tag 数越多,就认为日志相关性越强,所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件,它会根据日志的 tag 的相关性产生一个相关日志列表。
WordPress 主题教程:从零开始制作 WordPress 主题 创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题。
1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库:
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
2. 创建一个对应的 HTML 代码:
<ul class="bxslider">
<li><img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/22fc24ccad6fa7e5ef8dadd78dc2e954.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" /></li>
<li><img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/d36bae5d9cd370376c3b1efa95539061.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" /></li>
<li><img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/b9909b949543076606e70bac575817d8.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" /></li>
<li><img decoding="async" src="https://cdn.wpjam.com/qiniu/2029/image/86310580700cceb24c6c6804ca368278.jpg?imageMogr2/auto-orient/thumbnail/1200x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc=#" /></li>
</ul>
3. 调用 bxSlider:
$(document).ready(function(){
$('.bxslider').bxSlider();
});
当然 bxSlider 还有许多设置参数,你可以根据你自己的项目需求进行配置,详细请查看 bxSlider 的 Options 页面。