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

网页特效

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

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

jquery带导航箭头和自动播放进度条滑块/轮播图插件

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

这是一款轻量级响应迅速的jQuery滑块/轮播图插件,以给定的速度自动滚动图像,并在顶部或底部显示进度条,告诉用户导航到下一个图像所需的剩余时间。当鼠标悬停在图片上时自动暂停播放行为,并显示上一个/下一个按钮,可用于手动在图像之间切换。

使用方法:

1. 添加焦点图html代码

<div class="your-slider">
  <div class="your-slider-item">
    <img src="1.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="2.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="3.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="4.jpg" alt="" />
  </div>
  <div class="your-slider-item">
    <img src="5.jpg" alt="" />
  </div>
</div>

2.在文档中加载必要的JavaScript和CSS文件。

<link rel="stylesheet" href="jquery.carousel-line-arrow.css" />
<script src="jquery.min.js"></script>
<script src="jquery.carousel-line-arrow.js"></script>

3.指定旋转木滑块的高度。

.carousel-wrapper-middle { height: 400px; }

4.插件初始化。

$('.your-slider').carouselLineArrow({
  // options here
});

5.自定义动画速度。默认值:500毫秒。

$('.your-slider').carouselLineArrow({
  slideDur: 700
});

6.确定在调整窗口大小时是否自动调整旋转木马滑块的高度。默认值:true。

$('.your-slider').carouselLineArrow({
  heightIsProportional: false
});

7. 自定义自动播放进度条。

$('.your-slider').carouselLineArrow({

  // duration in ms
  lineDur: 5000,

  // or 'top'
  linePosition: 'bottom',

  // height
  lineHeight: '5px',

  // background color
  lineColor: 'red'
  
});

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

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

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

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

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

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