欢迎光临一流素材网,免积分免费素材下载!
AD

个性灵活的JQUERY幻灯片-RHINOSLIDER

所属栏目:轮播图/幻灯片更新时间:2016-10-18原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8

Rhinoslider号称是最灵活得 Jquery 幻灯片插件,Rhinoslider不但可以将所有的效果用在图片上,还可以用在各种类型的Html标签元素上。
我们不仅可以使用官方的一系列效果,而且还可以添加我们自己的样式效果。

官方还给我们提供了一个生成器,即使你没有任何javascript和jquery的编程经验也可以将Rhinoslider很好地应用到我们的网站中去,我们只需要边点边看效果,然后将代码复制到我们的js文件中即可。


预览图

width="474" height="300" title="JQUERY幻灯片,RHINOSLIDER" alt="JQUERY幻灯片,RHINOSLIDER"/>

width="474" height="300" title="JQUERY幻灯片,RHINOSLIDER" alt="JQUERY幻灯片,RHINOSLIDER"/>

使用步骤

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'});


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jquery手机端响应式banner图片滚动切换效果

2兼容触屏手机浏览的JS全屏焦点图代码

3jQuery touchSlider全屏图片轮播幻灯焦点图代码

4jquery灯箱画廊插件lightgallery

5jquery轮播焦点图

6js卡片式图片叠加滚动切换代码

7带左右箭头滑动焦点图幻灯片jQuery特效代码

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

10jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

最新更新的

1exzoom-一款jquery商城商品放大镜插件

2jQuery响应式触屏图片左右滚动代码owl.carousel

3轻量级响应式jQuery轮播图/幻灯片插件-lightslider

4移动端滑动JS响应式轮播图插件

5jQuery倾斜图片切换滚动焦点图幻灯片代码

6jQuery版仿淘宝商城天猫首页多格焦点图效果

7易迅网竖排多格jquery焦点图代码

8jQ索引按钮+缩略图双重切换

9兼容触屏手机浏览的JS全屏焦点图代码

10鼠标滑过+自动播放jQ全屏焦点图代码