帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery水平内容滑块幻灯片特效插件

帝国模板之家 2020-11-12 网页特效 评论

这是款轻量级的jQuery插件,可以创建一个水平的内容滑块,用户可以通过鼠标滚轮、箭头键或单击锚和分页控件来滑动幻灯片。

使用方法:

1.在jQuery之后加载最新版本的x-ryam.js插件。

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

2.将幻灯片添加到x-Rhym内容滑块,如下所示:

<div id="XContainer" class="x_container">
  <article class="x_item">
    <h2>Article title 1</h2>
    <p>Article Content 1</p>
  </article>

  <article class="x_item">
    <h2>Article title 2</h2>
    <p>Article Content 2</p>
  </article>

  <article class="x_item">
    <h2>Article title 3</h2>
    <p>Article Content 3</p>
  </article>

  <article class="x_item">
    <h2>Article title 4</h2>
    <p>Article Content 4</p>
  </article>

  <article class="x_item">
    <h2>Article title 5</h2>
    <p>Article Content 5</p>
  </article>
 
  ...

</div>

3. 插件初始化。

$(function(){
  $('.x_container').xrhyme();
});

4. 添加分页控件到内容滑块。

<nav>
  <ul>
    <li class="anchor"><a href="#0">1</a></li>
    <li class="anchor"><a href="#1">2</a></li>
    <li class="anchor"><a href="#2">3</a></li>
    <li class="anchor"><a href="#3">4</a></li>
    <li class="anchor"><a href="#4">5</a></li>
  </ul>
</nav>
$(function(){
  $('.x_container').xrhyme({
    navigationSelector : 'nav li'
  });
});

5. 在幻灯片之间使用锚链接导航。

<div id="XContainer" class="x_container">
  <article class="x_item">
    <h2>Article title 1</h2>
    <p>Article Content 1</p>
    <p class="anchor"><a href="#1">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 2</h2>
    <p>Article Content 2</p>
    <p class="anchor"><a href="#2">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 3</h2>
    <p>Article Content 3</p>
    <p class="anchor"><a href="#3">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 4</h2>
    <p>Article Content 4</p>
    <p class="anchor"><a href="#4">next »</a></p>
  </article>

  <article class="x_item">
    <h2>Article title 5</h2>
    <p>Article Content 5</p>
    <p class="anchor"><a href="#0">« Back</a></p>
  </article>
 
  ...

</div>
$(function(){
  $('.x_container').xrhyme({
    navigationSelector : '.anchor a',
    anchorMode : true
  });
});

6. 对滚动过渡特效。需要jQuery easing插件。

<script src="jquery.easing.min.js"></script>
$(function(){
  $('.x_container').xrhyme({
    easing : 'swing'
  });
});

7. 确定鼠标轮速度(0-1)。

$(function(){
  $('.x_container').xrhyme({
    wheelSpeed : 0.5
  });
});

8.指定动画速度

$(function(){
  $('.x_container').xrhyme({
    animationTime : 600
  });
});

9.转换完成后触发函数。

$(function(){
  $('.x_container').xrhyme({
    animeComplete : function(){
      // do something
    }
  });
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言