`

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

 

1
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery右侧选项卡焦点图片轮播代码.zip

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本项目“jQuery右侧选项卡焦点图片轮播代码”是利用jQuery实现的一个功能丰富的图片展示工具,特别适合用于网站的...

    jquery的实例--jquerydemo

    "jquery的实例--jquerydemo"这个资源显然提供了一系列的jQuery实践案例,非常适合初学者用来学习和理解jQuery的基本用法和常见功能。下面我们将深入探讨其中提到的一些关键知识点。 1. **表格隔行变色**:这是...

    jQuery带缩略图焦点图片轮播特效.zip

    **jQuery带缩略图焦点图片轮播特效** jQuery是一款轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作,事件处理,动画制作以及Ajax交互。在这个“jQuery带缩略图焦点图片轮播特效”中,我们将深入探讨如何...

    jQuery淡出淡进首页焦点图片轮播可按钮控制焦点图片轮播

    "jQuery淡出淡进首页焦点图片轮播可按钮控制"是一种常见的交互式图像展示方式,它通过jQuery库实现图片的平滑过渡效果,增加用户体验。接下来,我们将深入探讨这个主题。 首先,jQuery是一个轻量级的JavaScript库,...

    jQuery选项卡形式四屏焦点图片轮播代码

    总之,“jQuery选项卡形式四屏焦点图片轮播代码”是一个结合了用户交互、动态内容切换和视觉效果的实例,它展示了jQuery在网页开发中的强大功能。理解并掌握这种实现方式,对于提升网页设计和开发能力是非常有益的。

    jQuery带登录框的全屏背景焦点图轮播特效代码

    **jQuery带登录框的全屏背景焦点图轮播特效代码详解** 在网页设计中,全屏背景轮播图已经成为一种常见的展示方式,它能够吸引用户的注意力,为网站增添视觉冲击力。本文将深入探讨如何使用jQuery实现这样一个带有...

    布丁移动官网jQuery焦点图,大幅图片轮播

    “布丁移动官网jQuery焦点图”是一个很好的实例,展示了如何利用jQuery创建功能丰富的图片轮播效果。通过理解其背后的原理和实现方式,开发者可以灵活地应用到自己的项目中,提升网站的视觉吸引力和用户体验。同时,...

    jQuery自适应窗口图片轮播代码.zip

    为了增加用户体验,代码可能还包含了一些额外的特性,比如指示器(小圆点)来表示当前显示的图片位置,或者预览图效果,使用户可以预览即将显示的图片。这些细节可以通过DOM操作和CSS样式来实现。 总的来说,...

    猎豹jQuery全屏焦点图代码

    【猎豹jQuery全屏焦点图代码】是一种网页设计技术,用于在网站上创建吸引人的全屏图片轮播效果。此代码模仿了猎豹官方网站的设计,旨在提供高度真实且视觉效果出众的用户体验。jQuery是一个广泛使用的JavaScript库,...

    安卓图片轮播广告轮播自动滚屏相关-Android--广告条的轮播安卓开发经典实例.rar

    在安卓应用开发中,图片轮播广告是一种常见的组件,它能吸引用户注意力并展示推广内容。本实例聚焦于实现一个自动滚屏的广告条,这是一个典型的需求,尤其在新闻、电商或者社交应用中广泛存在。下面我们将深入探讨...

    Jquery仿淘宝左右上下两种图片轮播效果

    总结来说,"Jquery仿淘宝左右上下两种图片轮播效果"涵盖了jQuery基础、CSS动画、DOM操作、事件处理等多个核心知识点,是学习和实践网页动态效果的优秀实例。通过理解和实现这个项目,开发者可以提升对网页交互设计的...

    swiper焦点轮播图实例

    前端开发swiper焦点图实例,类似于https://www.swiper.com.cn/demo/web/index.html所示效果。

    jQuery图片横向滚动轮播代码

    本教程将深入探讨如何使用jQuery实现一款带标题和进度条的图片横向滚动轮播效果,以及涉及到的相关技术。 首先,`index.html`是网页的主体文件,它包含了HTML结构,包括轮播容器、图片元素、控制按钮(左右箭头)...

    0原生js-面向对象-无缝轮播图.zip

    无缝轮播图是一种常见的网页元素,它为用户提供了一种优雅的方式来展示多张图片或内容,让它们看起来像在一个无限循环中平滑过渡。 1. **原生JavaScript** 原生JavaScript是理解Web浏览器如何与HTML和CSS交互的...

    JavaScript应用实例-UI轮播图.js

    JavaScript应用实例-UI轮播图.js

    一次滚动3张图片的jquery轮播图特效.rar

    一次滚动3张图片的jquery轮播图特效,这个焦点图与其它焦点图的区别主要是一次滚动切换图片的张数,一般情况下,焦点图一次切换一张大图片,而本特效中,一次同时切换3张,此三张图片为一组,以组为基本元素进行切换...

    jQuery途牛首页定时幻灯片轮播效果

    综上所述,"jQuery途牛首页定时幻灯片轮播效果"是结合了jQuery的高效性和动画功能,以及良好的用户体验设计的一个实例,它展示了如何使用JavaScript库来实现复杂但直观的网页动态效果。在实际开发中,通过分析和理解...

    横向纵向菜单--JQuery实例

    本实例将深入探讨如何使用jQuery库来实现这两种类型的交互式菜单,为用户提供更友好的界面体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个"横向纵向菜单"的...

    带视觉差效果的jquery响应式轮播图特效

    在本实例中,我们探讨的是如何使用jQuery实现一款带视觉差效果的响应式轮播图特效。 视觉差效果,通常称为Parallax Scrolling,是一种网页设计技术,使得背景图像相对于前景元素以不同的速度移动,从而营造出深度感...

    jQuery简单的淡入淡出焦点图片轮播切换代码

    本教程将详细讲解如何使用jQuery实现一个简单的淡入淡出焦点图片轮播切换功能。 首先,我们需要了解jQuery的基本用法。jQuery的核心理念是"Write Less, Do More",它通过简洁的语法提供了丰富的DOM操作、事件处理、...

Global site tag (gtag.js) - Google Analytics