支持4种类型的jQuery轮播图插件EasySlides

news/2024/11/28 12:21:46/文章来源:https://www.cnblogs.com/liylllove/p/18570683

EasySlides是一款支持4种类型的jQuery轮播图插件。该jquery轮播图采用响应式设计,支持移动设备,内置有大图轮播,多图轮播,封面轮播和圆形轮播四种轮播图模式可供选择。

在线演示   下载

 使用方法

在页面中引入jquery和jquery.easy_slides.js文件,以及样式文件jquery.easy_slides.css。

<link href="css/jquery.easy_slides.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easy_slides.js"></script>        
 HTML结构

四种轮播图的HTML结构和初始化方法分别如下:

1、大图轮播模式:

<div class="slider slider_one_big_picture"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button">NEXT</div>  <div class="prev_button">PREV</div>  <div class="nav_indicators"></div></div>       
$('.slider_one_big_picture').EasySlides()        

2、多图轮播模式

<div class="slider slider_one_big_2"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="nav_indicators"></div></div>    
$('.slider_one_big_2').EasySlides({'autoplay': false,'stepbystep': true,'show': 5,'loop': true
})    

3、封面轮播模式

<div class="slider slider_circle_10"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div></div>                  
$('.slider_circle_10').EasySlides({'autoplay': true,'show': 13
})   

4、同时显示4幅图片模式

<div class="slider slider_four_in_line"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div>
</div>                 
$('.slider_four_in_line').EasySlides({'autoplay': true,'show': 9
})

5、圆形轮播模式

<div class="slider slider_clock"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div class="next_button"></div><div class="prev_button"></div>
</div>                
$('.slider_clock').EasySlides({'autoplay': true,'stepbystep': false,'show': 15
})

 

 配置参数

该jQuery轮播图的可用配置参数有:

{'autoplay': false,'timeout': 3000,'show': 5,'vertical': false,'reverse': false,'touchevents': true,'delayaftershow': 300,'stepbystep': true,'startslide': 0,'loop': true,'distancetochange': 10,'beforeshow': function () {},'aftershow': function () {},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/841739.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Avalonia 中使用 CEF 在 Ubuntu 运行崩溃分析

在 Linux 上使用 Avalonia 和 CefGlue:崩溃分析 介绍 本文主要记录了在 Avalonia 中使用 CefGlue(基于 .NET 的 Chrome 嵌入内核的封装库)时遇到的问题,目的是测试 Avalonia 的 Chrome 内核在 Linux 系统中的兼容性。然而在实际运行时,我们意外地遇到了运行崩溃的问题。环…

视频智能分析助力城市管理革新

在智慧城市建设的大潮中,视频智能分析技术正成为城市管理革新的重要推手。这项技术通过深度学习和人工智能算法,对视频数据进行实时分析和处理,为城市管理提供了前所未有的智能支持。本文将探讨视频智能分析技术在城市管理中的应用内容,以及它如何助力城市治理向更高效、更…

diffusion Policy学习

diffusion model原理 https://segmentfault.com/a/1190000043744225#item-4 https://lilianweng.github.io/posts/2021-07-11-diffusion-models/ 变分自编码器:把某图像变成向量,再用该向量生成图像。 扩散模型是一种特殊的VAE,其灵感来自于热力学:一个分布可以通过不断地添…

js写飞机大战小游戏

第一步,写一个html页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style>body { margin: 0; }canvas { display: block; background-color: #000; } </sty…

面试课程__性能测试讲解(5.1)

一、你做过性能测试吗? 方法1:做过 方法2:在公司性能是专门性能小组做的,但是我也会做 二、性能测试有哪些类型? (1)压力测试(破坏性测试) 压力测试是系统在一定饱和状态下,例如:cpu、内存、磁盘io在饱和使用情况下,不断给系统施加压力,看系统处理能力,以及系统是…

活动报名!《国产开源数据库PolarDBPG专家训练营》北京站

2024年11月29日, 由PolarDB社区联合PostgreSQL社区发起的《国产开源数据库PolarDB+PostgreSQL专家训练营》在北京站正式开课。 PostgreSQL中文社区理事长及多位核心成员汇聚上地国际人才会客厅会议室,为大家带来为期一天的技术盛宴,和大家一起分享PolarDB和PostgreSQL数据库知…

RPA处理京东商智系统日期控件

需求:在 京东商智系统-流量概况 页面批量抓取指定商品在指定日期范围内每一天的搜索关键词TOP5数据 京东商智系统,搜索关键词TOP5、时间控件展示如下(该时间控件不支持手工输入日期,也不支持选择指定月份\年份,只能通过左右按钮切换年月和点击日历上的日期来选择指定日期)…

有了这套车间生产看板,生产进度一目了然

一般来说,生产安排搞定之后,接下来盯着生产计划执行的情况就成了生产管理的关键。要是生产进度跟不上,产品没法按时交货,那对企业的盈利和品牌形象可都是影响不小,可能会出现下面这些问题:实时数据问题:企业很难获实时生产进度数据,使管理层无法及时掌握生产状况,难以…

罐笼乘坐人员超限识别智慧矿山一体机非煤矿山算法安全监管的智能化升级

在矿山行业中,安全始终是最为关键的议题。智慧矿山一体机专为矿山安全监控和管理设计,集成了多种智能化功能,以提升矿山的安全监管能力和生产效率。本文将详细介绍识别智慧矿山一体机在非煤矿山中的应用,特别是其罐笼乘坐人员超限识别算法的工作原理、技术实现以及实际应用…

pikachu平台XXE漏洞通关教程详解

声明! 如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人无关,切勿触碰法律底线,否则后果自负!!!!工具在网盘,自取 通过网盘分享的文件:phpstudy 链接: https://pan.baidu.com/s/1l0jpNGQvYMwRSq3BhD…

An Empirical Model of Large-Batch Training

目录概Gradient Noise ScaleMcCandlish S., Kaplan J., Amodei D. and OpenAI Dota Team. An empirical model of large-batch training. 2018.概 本文讨论了随着 batch size 改变, sgd-style 的优化器的学习应该怎么调整. Gradient Noise Scale考虑如下的优化问题: \[\tag{1} …

算法网关视频分析网关拍照检测高空抛物检测算法:守护城市安全的“天眼”

高空抛物,一个看似微不足道的行为,实则隐藏着巨大的安全隐患。随着城市化进程的加快,高层建筑如雨后春笋般拔地而起,高空抛物现象也随之增多,给人们的生活带来了严重的威胁。从烟头、饮料瓶到花盆、垃圾,这些被随意抛掷的物品,一旦从高空落下,其破坏力不容小觑。 为了有…