8种效果实例-jQuery anoSlide 焦点图轮播

anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件。

在线实例

单个多个动画延迟自动播放
显示分页显示标题延迟加载自适应高度

使用方法

  1. <div class="carousel"> 
  2.     <a class="prev"></a> 
  3.     <ul> 
  4.         <li><a href="javascript:"><img src="images/slides/1.jpg"></a></li> 
  5.         <li><a href="javascript:"><img src="images/slides/2.jpg"></a></li> 
  6.         ...... 
  7.     </ul> 
  8.     <a class="next"></a> 
  9. </div>
  10.  
  11. $(function() { 
  12.     $('.carousel ul').anoSlide( { 
  13.     items: 1, speed: 500, prev: 'a.prev', next: 'a.next'  
  14.     }); 
  15. });
复制

参数详解

参数描述默认值
items幻灯片每页可见个数5
speed幻灯片切换速度,以毫秒为单位1000
auto自动播放,值为一个整数,表示多久自动切换一次,单位为毫秒,0 表示不自动播放0
autoStop鼠标悬停停止自动播放true
next为“下一个”绑定一个选择器
prev为“上一个”绑定一个选择器
responsiveAt强制显示1个幻灯片,适用于较小的视口,如移动设备480
delay动画延迟,0 表示不延迟0
lazy图片延迟加载false
onConstruct初始化后的回调函数,可传递参数: instance – Instance of anoSlide
onStart切换之前的回调函数,可传递参数: ui.instance – Instance of anoSlideui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element
onEnd切换之后的回调函数,可传递参数: ui.instance – Instance of anoSlide ui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的jQuery垂直轮播做背景全屏的实例: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>垂直轮播做背景全屏实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="background-container"> <ul> <li style="background-image: url('https://picsum.photos/id/1/1600/900');"></li> <li style="background-image: url('https://picsum.photos/id/2/1600/900');"></li> <li style="background-image: url('https://picsum.photos/id/3/1600/900');"></li> </ul> </div> <div class="content"> <h1>这是一个全屏背景的垂直轮播</h1> <p>在这里可以添加其他内容</p> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } #background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } #background-container ul { position: relative; top: 0; left: 0; width: 100%; height: 300%; list-style: none; margin: 0; padding: 0; } #background-container ul li { position: absolute; top: 0; left: 0; width: 100%; height: 33.33%; background-size: cover; background-position: center center; background-repeat: no-repeat; animation: slide 10s ease infinite; } @keyframes slide { 0% { transform: translateY(0); } 33.33% { transform: translateY(-100%); } 66.66% { transform: translateY(-200%); } 100% { transform: translateY(0); } } .content { position: relative; z-index: 1; padding: 50px; text-align: center; color: #fff; } h1 { font-size: 48px; margin-bottom: 20px; } p { font-size: 24px; } ``` jQuery代码: ``` $(document).ready(function() { var slideHeight = $('#background-container').height() / 3; $('#background-container ul li').height(slideHeight); $(window).resize(function() { slideHeight = $('#background-container').height() / 3; $('#background-container ul li').height(slideHeight); }); }); ``` 在这个实例中,使用了CSS3动画实现了轮播的滚动效果。通过设置li元素的高度为背景容器高度的1/3,可以实现全屏显示。同时,为了适应窗口大小的变化,使用了jQuery的resize事件来重新设置li元素的高度。 需要注意的是,由于背景容器的定位为fixed,因此在页面中添加其他内容时需要设置z-index属性来控制层级。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值