当前位置:主页 > jquery插件 > 轮播图 >

个性灵活的JQUERY幻灯片-RHINOSLIDER

栏目分类:轮播图   模板编号:JQ00009    发布日期:2017-01-21   来源:网络   浏览次数:次     在线预览
插件描述:Rhinoslider号称是最灵活得 Jquery 幻灯片插件,Rhinoslider不但可以将所有的效果用在图片上,还可以用在各种类型的Html标签元素上。 我们不仅可以使用官方的一系列效果,而且

使用步骤

1、引入以下的js和css文件

<link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css">
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

2、在head标签中加入以下js代码,调用插件

<script type="text/javascript">
   $(document).ready(function(){
    $('#slider').rhinoslider();
   });
</script>

3、在body标签中加入以下格式的html代码,每张图片在一个 li 标签中。

<div id="page">
    <ul id="slider">       
        <li>
            <img src="img/slider/01.jpg" alt="JQUERY幻灯片,RHINOSLIDER">
        </li>
        <li>
            <img src="img/slider/02.jpg" alt="JQUERY幻灯片,RHINOSLIDER">
        </li>
        <li>
            <img src="img/slider/03.jpg" alt="JQUERY幻灯片,RHINOSLIDER">
        </li>
        <li>
            <img src="img/slider/04.jpg" alt="JQUERY幻灯片,RHINOSLIDER">
        </li>
        <li>
            <img src="img/slider/05.jpg" alt="JQUERY幻灯片,RHINOSLIDER">
        </li>
    </ul>
</div>

自定义效果参数生成器
Rhinoslider 非常贴心,给我们提供了一个自定义配置的生成器,我们只需点点点就可以完成参数的设置操作,下面我就来说说怎么使用控制器。
1、打开生成器地址:http://rhinoslider.com/demo-download/
2、在参数配置面板配置自己的参数,可以切换tab来配置不同类型的参数
alt="JQUERY幻灯片,RHINOSLIDER" width="100%"/>
3、参数配置好后,就可以预览了,只需要点击左上角的刷新图标即可
alt="JQUERY幻灯片,RHINOSLIDER" width="100%"/>
4、看看配置面板下面的预览是否符合自己的需求,不符合的话可以重复上面的操作,直到符合自己需求了,然后就可以将代码复制到自己的js中了
alt="JQUERY幻灯片,RHINOSLIDER" width="100%"/>

是不是很简单呢?


常见参数配置

上面我已经给大家讲解了怎样去配置自己的自定义参数,在此我还要列出几个常用的参数配置
1、自动播放
只需要将 autoPlay 参数设置成true即可

 $('#slideshow').rhinoslider({
   autoPlay: true,
});

2、是否显示图片标题
可取值:
never 从不显示
hover 只有当鼠标移动到图片上时才显示
always 总是显示标题
3、总是显示幻灯片下面的数字导航条,这个需求应该比较多

 $('#slideshow').rhinoslider({
  showBullets: 'always'
});

4、总是显示暂停、上一张、下一张 按钮,结合上面的需求

 $('#slideshow').rhinoslider({
  showControls: 'always'
});


在线演示 立即下载
打赏本站
云盘密码:0n6k
Copyright © 2014 资源盒子 版权所有   黔ICP备14004500号-3   TAG
轮播图 滚动代码 表单按钮 音频视频 客服代码 弹出提示 TAB选项卡 导航菜单 页面布局 图片展示 UI
织梦标签工具下载 ↑↓
织梦标签工具下载