jQuery轮播图7张图 带切换按钮 带预览小图 小图只显示前后五张 通过URL访问指定图片

时间: 2024-06-10 11:10:44 浏览: 175
以下是一个基于jQuery实现的轮播图,包括7张图片、切换按钮和预览小图,小图只显示前后五张。同时,可以通过URL访问指定图片。 HTML代码: ``` <div class="slider"> <div class="slider-main"> <ul class="slider-list"> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> <li><img src="image4.jpg" alt="Image 4"></li> <li><img src="image5.jpg" alt="Image 5"></li> <li><img src="image6.jpg" alt="Image 6"></li> <li><img src="image7.jpg" alt="Image 7"></li> </ul> </div> <div class="slider-prev"><i class="fa fa-angle-left"></i></div> <div class="slider-next"><i class="fa fa-angle-right"></i></div> <div class="slider-preview"> <div class="preview-list"> <ul> <li><a href="?img=1"><img src="image1.jpg" alt="Image 1"></a></li> <li><a href="?img=2"><img src="image2.jpg" alt="Image 2"></a></li> <li><a href="?img=3"><img src="image3.jpg" alt="Image 3"></a></li> <li><a href="?img=4"><img src="image4.jpg" alt="Image 4"></a></li> <li><a href="?img=5"><img src="image5.jpg" alt="Image 5"></a></li> <li><a href="?img=6"><img src="image6.jpg" alt="Image 6"></a></li> <li><a href="?img=7"><img src="image7.jpg" alt="Image 7"></a></li> </ul> </div> <div class="preview-prev"><i class="fa fa-angle-left"></i></div> <div class="preview-next"><i class="fa fa-angle-right"></i></div> </div> </div> ``` CSS代码: ``` .slider { position: relative; overflow: hidden; width: 800px; height: 500px; } .slider-main { position: absolute; top: 0; left: 0; width: 700%; height: 100%; } .slider-list { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; } .slider-list li { position: relative; float: left; width: 14.2857%; height: 100%; } .slider-list li img { display: block; width: 100%; height: 100%; } .slider-prev, .slider-next { position: absolute; top: 50%; z-index: 1; width: 50px; height: 50px; margin-top: -25px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px; cursor: pointer; } .slider-prev { left: 0; } .slider-next { right: 0; } .slider-preview { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background-color: rgba(0, 0, 0, 0.5); } .preview-list { position: relative; width: 100%; height: 100%; overflow: hidden; } .preview-list ul { position: absolute; top: 0; left: 0; width: 700%; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform 0.5s ease; } .preview-list li { position: relative; float: left; width: 14.2857%; height: 100%; } .preview-list li a { display: block; width: 100%; height: 100%; } .preview-list li img { display: block; width: 100%; height: 100%; opacity: 0.5; transition: opacity 0.5s ease; } .preview-list li.active img { opacity: 1; } .preview-prev, .preview-next { position: absolute; top: 50%; z-index: 1; width: 50px; height: 50px; margin-top: -25px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; line-height: 50px; cursor: pointer; } .preview-prev { left: 0; } .preview-next { right: 0; } ``` JavaScript代码: ``` $(function() { var $slider = $('.slider'), $sliderMain = $('.slider-main'), $sliderList = $('.slider-list'), $sliderItem = $('.slider-list li'), $sliderPrev = $('.slider-prev'), $sliderNext = $('.slider-next'), $previewList = $('.preview-list ul'), $previewItem = $('.preview-list li'), $previewPrev = $('.preview-prev'), $previewNext = $('.preview-next'), total = $sliderItem.length, current = 0, interval = null; // 初始化 $sliderItem.eq(current).addClass('active'); $previewItem.eq(current).addClass('active'); $previewList.css('transform', 'translateX(-' + (current * 14.2857) + '%)'); // 切换到指定图片 var img = parseInt(getParameterByName('img')); if (img && img > 0 && img <= total) { current = img - 1; changeSlide(); } // 切换到下一张图片 function nextSlide() { current++; if (current >= total) { current = 0; } changeSlide(); } // 切换到上一张图片 function prevSlide() { current--; if (current < 0) { current = total - 1; } changeSlide(); } // 切换到指定图片 function gotoSlide(index) { current = index; changeSlide(); } // 切换图片 function changeSlide() { $sliderList.stop().animate({ 'left': '-' + (current * 100) + '%' }, 500); $sliderItem.eq(current).addClass('active').siblings().removeClass('active'); $previewItem.eq(current).addClass('active').siblings().removeClass('active'); if (current >= 5 && current < total - 2) { $previewList.stop().animate({ 'transform': 'translateX(-' + ((current - 4) * 14.2857) + '%)' }, 500); } else if (current >= total - 2) { $previewList.stop().animate({ 'transform': 'translateX(-' + ((total - 9) * 14.2857) + '%)' }, 500); } else { $previewList.stop().animate({ 'transform': 'translateX(0)' }, 500); } } // 自动轮播 interval = setInterval(nextSlide, 5000); // 鼠标悬停停止自动轮播 $slider.on('mouseover', function() { clearInterval(interval); }).on('mouseout', function() { interval = setInterval(nextSlide, 5000); }); // 点击切换按钮切换图片 $sliderPrev.on('click', function() { prevSlide(); }); $sliderNext.on('click', function() { nextSlide(); }); // 点击预览小图切换图片 $previewItem.on('click', function() { var index = $(this).index(); gotoSlide(index); }); // 点击预览小图切换按钮切换预览小图 $previewPrev.on('click', function() { if (current > 0) { current--; $previewList.stop().animate({ 'transform': 'translateX(-' + (current * 14.2857) + '%)' }, 500); } }); $previewNext.on('click', function() { if (current < total - 1) { current++; if (current >= 5 && current < total - 2) { $previewList.stop().animate({ 'transform': 'translateX(-' + ((current - 4) * 14.2857) + '%)' }, 500); } else if (current >= total - 2) { $previewList.stop().animate({ 'transform': 'translateX(-' + ((total - 9) * 14.2857) + '%)' }, 500); } } }); // 获取URL参数 function getParameterByName(name) { var url = window.location.href; name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) { return null; } if (!results[2]) { return ''; } return decodeURIComponent(results[2].replace(/\+/g, ' ')); } }); ``` 注意事项: 1. 根据实际图片路径修改HTML代码中的图片路径; 2. 如果需要使用字体图标作为切换按钮,需要引入Font Awesome字体库; 3. 代码中使用了ES6语法,需要使用支持ES6的浏览器或者使用Babel进行转换。
阅读全文

相关推荐

最新推荐

recommend-type

python实现批量处理将图片粘贴到另一张图片上并保存

在本文中,我们将探讨如何使用Python的Pillow库来实现批量处理图片,将一张图片粘贴到另一张图片上,并将结果保存。Pillow库是Python的一个强大的图像处理库,它提供了丰富的图像处理功能,包括读取、操作和保存各种...
recommend-type

opencv实现多张图像拼接

在本教程中,我们将探讨如何使用OpenCV实现多张图像的拼接,这是一个常见的任务,例如在全景图创建、图像合成或数据分析等场景中。 首先,让我们了解基本概念。图像拼接是将两张或多张图像合并成一张大图像的过程。...
recommend-type

在tensorflow下利用plt画论文中loss,acc等曲线图实例

例如,`TensorBoard(log_dir='./logs', histogram_freq=1)`会在指定目录下创建日志,然后通过TensorBoard工具查看损失和准确率的动态变化。 此外,模型优化器的选择也很关键,例如在示例中提到了`SGD`(随机梯度...
recommend-type

Python书籍图片变形软件与直纹表面模型构建

从给定的文件信息中,我们可以提取出几个核心知识点来详细介绍。以下是详细的知识点说明: ### 标题知识点 1. **书籍图片图像变形技术**:“book-picture-dewarping”这个名字直译为“书本图片矫正”,这说明该软件的目的是通过技术手段纠正书籍拍摄时产生的扭曲变形。这种扭曲可能由于拍摄角度、书本弯曲或者页面反光等原因造成。 2. **直纹表面模型构建**:直纹表面模型是指通过在两个给定的曲线上定义一系列点,而这些点定义了一个平滑的曲面。在图像处理中,直纹表面模型可以被用来模拟和重建书本页面的3D形状,从而进一步进行图像矫正。 ### 描述知识点 1. **软件使用场景与历史**:描述中提到软件是在2011年在Google实习期间开发的,说明了该软件有一定的历史背景,并且技术成形的时间较早。 2. **代码与数据可用性**:虽然代码是免费提供的,但开发时所使用的数据并不共享,这表明代码的使用和进一步开发可能会受到限制。 3. **项目的局限性与发展方向**:作者指出原始项目的结构和实用性存在不足,这可能指的是软件的功能不够完善或者用户界面不够友好。同时,作者也提到在技术上的新尝试,即直接从图像中提取文本并进行变形,而不再依赖额外数据,如3D点。这表明项目的演进方向是朝着更自动化的图像处理技术发展。 4. **项目的未公开状态**:尽管作者在新的方向上有所进展,但目前这个新方法还没有公开,这可能意味着该技术还处于研究阶段或者需要进一步的开发和验证。 ### 标签知识点 1. **Python编程语言**:标签“Python”表明该软件的开发语言为Python。Python是一种广泛使用的高级编程语言,它因其简洁的语法和强大的库支持,在数据处理、机器学习、科学计算和Web开发等领域非常受欢迎。Python也拥有很多图像处理相关的库,比如OpenCV、PIL等,这些工具可以用于开发图像变形相关的功能。 ### 压缩包子文件知识点 1. **文件名称结构**:文件名为“book-picture-dewarping-master”,这表明代码被组织为一个项目仓库,通常在Git版本控制系统中,以“master”命名的文件夹代表主分支。这意味着,用户可以期望找到一个较为稳定且可能包含多个版本的项目代码。 2. **项目组织结构**:通常在这样的命名下,用户可能会找到项目的基本文件,包括代码文件(如.py)、文档说明(如README.md)、依赖管理文件(如requirements.txt)和版本控制信息(如.gitignore)。此外,用户还可以预见到可能存在的数据文件夹、测试脚本以及构建脚本等。 通过以上知识点的阐述,我们可以看出该软件项目的起源背景、技术目标、目前状态以及未来的发展方向。同时,对Python语言在该领域的应用有了一个基础性的了解。此外,我们也可以了解到该软件项目在代码结构和版本控制上的组织方式。对于希望进一步了解和使用该技术的开发者来说,这些信息是十分有价值的。
recommend-type

Python环境监控高可用构建:可靠性增强的策略

# 1. Python环境监控高可用构建概述 在构建Python环境监控系统时,确保系统的高可用性是至关重要的。监控系统不仅要在系统正常运行时提供实时的性能指标,而且在出现故障或性能瓶颈时,能够迅速响应并采取措施,避免业务中断。高可用监控系统的设计需要综合考虑监控范围、系统架构、工具选型等多个方面,以达到对资源消耗最小化、数据准确性和响应速度最优化的目
recommend-type

DeepSeek-R1-Distill-Qwen-7B-F16.gguf解读相关参数

### DeepSeek-R1-Distill-Qwen-7B-F16.gguf 模型文件参数解释 #### 模型名称解析 `DeepSeek-R1-Distill-Qwen-7B-F16.gguf` 是一个特定版本的预训练语言模型。其中各个部分含义如下: - `DeepSeek`: 表明该模型由DeepSeek团队开发或优化[^1]。 - `R1`: 版本号,表示这是第一个主要版本[^2]。 - `Distill`: 提示这是一个蒸馏版模型,意味着通过知识蒸馏技术从更大更复杂的教师模型中提取关键特征并应用于较小的学生模型上[^3]。 - `Qwen-7B`: 基础架构基于Qwen系列中的
recommend-type

H5图片上传插件:个人资料排名第二的优质选择

标题中提到的“h5图片上传插件”指的是为HTML5开发的网页图片上传功能模块。由于文件描述中提到“个人资料中排名第二”,我们可以推断该插件在某个平台或社区(例如GitHub)上有排名,且表现不错,获得了用户的认可。这通常意味着该插件具有良好的用户界面、高效稳定的功能,以及容易集成的特点。结合标签“图片上传插件”,我们可以围绕HTML5中图片上传的功能、实现方式、用户体验优化等方面展开讨论。 首先,HTML5作为一个开放的网页标准技术,为网页提供了更加丰富的功能,包括支持音频、视频、图形、动画等多媒体内容的直接嵌入,以及通过Canvas API和SVG提供图形绘制能力。其中,表单元素的增强使得Web应用能够支持更加复杂的文件上传功能,尤其是在图片上传领域,这是提升用户体验的关键点之一。 图片上传通常涉及以下几个关键技术点: 1. 表单元素(Form):在HTML5中,表单元素得到了增强,特别是`<input>`元素可以指定`type="file"`,用于文件选择。`accept`属性可以限制用户可以选择的文件类型,比如`accept="image/*"`表示只接受图片文件。 2. 文件API(File API):HTML5的File API允许JavaScript访问用户系统上文件的信息。它提供了`File`和`Blob`对象,可以获取文件大小、文件类型等信息。这对于前端上传图片前的校验非常有用。 3. 拖放API(Drag and Drop API):通过HTML5的拖放API,开发者可以实现拖放上传的功能,这提供了更加直观和便捷的用户体验。 4. XMLHttpRequest Level 2:在HTML5中,XMLHttpRequest被扩展为支持更多的功能,比如可以使用`FormData`对象将表单数据以键值对的形式发送到服务器。这对于文件上传也是必须的。 5. Canvas API和Image API:上传图片后,用户可能希望对图片进行预览或编辑。HTML5的Canvas API允许在网页上绘制图形和处理图像,而Image API提供了图片加载后的处理和显示机制。 在实现h5图片上传插件时,开发者通常会考虑以下几个方面来优化用户体验: - 用户友好性:提供清晰的指示和反馈,比如上传进度提示、成功或失败状态的提示。 - 跨浏览器兼容性:确保插件能够在不同的浏览器和设备上正常工作。 - 文件大小和格式限制:根据业务需求对用户上传的图片大小和格式进行限制,确保上传的图片符合预期要求。 - 安全性:在上传过程中对文件进行安全检查,比如防止恶意文件上传。 - 上传效率:优化上传过程中的性能,比如通过分片上传来应对大文件上传,或通过Ajax上传以避免页面刷新。 基于以上知识点,我们可以推断该“h5图片上传插件”可能具备了上述的大部分特点,并且具有易用性、性能和安全性上的优化,这使得它在众多同类插件中脱颖而出。 考虑到文件名列表中的“html5upload”,这可能是该插件的项目名称、文件名或是一部分代码命名。开发者或许会使用该命名来组织相关的HTML、JavaScript和CSS文件,从而使得该插件的结构清晰,便于其他开发者阅读和集成。 综上所述,“h5图片上传插件”是一个利用HTML5技术实现的、功能完善且具有优良用户体验的图片上传组件。开发者可以使用该插件来提升网站或Web应用的互动性和功能性,尤其在处理图片上传这种常见的Web功能时。
recommend-type

Python环境监控性能监控与调优:专家级技巧全集

# 1. Python环境性能监控概述 在当今这个数据驱动的时代,随着应用程序变得越来越复杂和高性能化,对系统性能的监控和优化变得至关重要。Python作为一种广泛应用的编程语言,其环境性能监控不仅能够帮助我们了解程序运行状态,还能及时发现潜在的性能瓶颈,预防系统故障。本章将概述Python环境性能监控的重要性,提供一个整体框架,以及为后续章节中深入探讨各个监控技术打
recommend-type

deepseek R1模型如何使用

### DeepSeek R1 模型简介 DeepSeek R1 是一种先进的预训练语言模型,能够处理多种自然语言处理任务。该模型基于Transformer架构设计,在大规模语料库上进行了充分的训练[^1]。 ### 安装与环境配置 为了使用 DeepSeek R1 模型,需先安装必要的依赖包并设置运行环境: ```bash pip install deepseek-r1-transformers ``` 确保 Python 版本不低于 3.7,并已安装 PyTorch 库[^2]。 ### 加载预训练模型 通过如下代码可以加载已经过训练的 DeepSeek R1 模型实例:
recommend-type

Java实体自动生成MySQL建表语句工具

Java实体转MySQL建表语句是Java开发中一个非常实用的功能,它可以让开发者通过Java类(实体)直接生成对应的MySQL数据库表结构的SQL语句。这项功能对于开发人员来说可以大幅提升效率,减少重复性工作,并降低因人为操作失误导致的错误。接下来,我们将详细探讨与Java实体转MySQL建表语句相关的几个知识点。 ### 知识点一:Java实体类的理解 Java实体类通常用于映射数据库中的表,它代表了数据库表中的一行数据。在Java实体类中,每个成员变量通常对应数据库表中的一个字段。Java实体类会使用一些注解(如`@Entity`、`@Table`、`@Column`等)来标记该类与数据库表的映射关系以及属性与字段的对应关系。 ### 知识点二:注解的使用 在Java中,注解(Annotation)是一种元数据形式,它用于为代码提供额外的信息。在将Java实体类转换为MySQL建表语句时,常用注解包括: - `@Entity`:标记一个类为实体类,对应数据库中的表。 - `@Table`:用于指定实体类对应的数据库表的名称。 - `@Column`:用于定义实体类的属性与表中的列的映射关系,可以指定列名、数据类型、是否可空等属性。 - `@Id`:标记某个字段为表的主键。 ### 知识点三:使用Java代码生成建表语句 在Java中,通过编写代码使用某些库或框架可以实现将实体类直接转换为数据库表结构的SQL语句。常见的工具有MyBatis的逆向工程、Hibernate的Annotation SchemaExport等。开发者可以通过这些工具提供的API,将配置好的实体类转换成相应的建表SQL语句。 ### 知识点四:建表语句的组成 MySQL建表语句主要包含以下几个关键部分: - `CREATE TABLE`:基本的建表语句开始标志。 - 表名:在创建新表时,需要为其指定一个名称。 - 字段定义:通过`CREATE TABLE`语句后跟括号中的列定义来创建表。每个字段通常需要指定字段名、数据类型、是否允许为空(NOT NULL)、默认值、主键(PRIMARY KEY)、外键(FOREIGN KEY)等。 - 数据类型:指定字段可以存储的数据类型,如`INT`、`VARCHAR`、`DATE`、`TEXT`等。 - 约束:定义了数据必须满足的规则,如主键约束(PRIMARY KEY)、唯一约束(UNIQUE)、外键约束(FOREIGN KEY)、检查约束(CHECK)等。 ### 知识点五:使用压缩包子工具 压缩包子工具可能是一个自定义的应用程序或框架,其名称为generatorTableSql。它可能是利用上述提及的Java注解和库框架来实现Java实体类转MySQL建表语句的程序。从提供的文件名称列表中,我们可以推测这个工具能够解析Java实体类,根据类的结构和注解生成创建表的SQL语句,并将其压缩打包。 ### 知识点六:最佳实践 在利用Java实体类生成MySQL建表语句时,需要注意以下最佳实践: - 保持代码整洁和一致性,遵循命名规范。 - 使用版本控制工具(如Git)来管理代码和SQL语句的变更。 - 在开发过程中,进行单元测试和集成测试,确保生成的SQL语句能够正确无误地创建所需的表结构。 - 定期审查和更新实体类和建表语句,确保它们能够反映当前的业务需求和数据模型。 通过上述知识点的详细阐述,我们可以理解Java实体转MySQL建表语句的过程以及其背后的技术原理。掌握这些知识可以帮助开发者高效地完成数据持久层的开发任务,减少重复性工作,从而专注于业务逻辑的实现。