欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

在rails中-index页面添加轮播图 slider

TODO:

1.把这三个网页上的内容复制到本地项目目录下。

http://bxslider.com/lib/jquery.bxslider.css

http://bxslider.com/js/jquery.min.js

http://bxslider.com/lib/jquery.bxslider.js

2.在head中应用slider 的js, css文件

< script src="jquery.min.js">
< script src="jquery.bxslider.min.js">
< link href="jquery.bxslider.css" rel="stylesheet" />

3.在body中添加代码(添加图片)

< ul class="bxslider">
  < li>< img src="/images/pic1.jpg" />
  < li>< img src="/images/pic2.jpg" />
  < li>< img src="/images/pic3.jpg" />
  < li>< img src="/images/pic4.jpg" />
< /ul>

4.在最后添加上代码:

 < script>
 $(document).ready(function(){
   $('.bxslider').bxSlider({
     auto: true,
     autoControls: true,
     adaptiveHeight: true,
     mode: 'fade'
   });
 });
 < /script>            

5.最后在加一些样式 就可以了  在官网的options中

具体的东西请参考官网  http://bxslider.com/

返回列表