jQuery实现图片轮播特性。使用animate函数

本文主要是介绍jQuery实现图片轮播特性。使用animate函数,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

图片轮播特效是一个非常常见的特性,可以使用jQuery来实现,下面使用animate()函数来实现向左轮播(向其他方向的轮播与其相似),实现的方法有两种,先看一下实现原理:

1、假设公五张图片,图片宽度均为200px,图片并排放置在一个总宽度为1000px的容器内。

2、另外设一个视口容器的宽度为600px,并设置overflow属性为hidden,将上述图片容器放入此容器内,则只会同时显示三张图,另外两张在容器外部且不可见,(同理,如果容器宽度为200px,则只会同时显示一张图,当设置容器宽度为1000px或更大时,可同时显示所有图片,但是这样会使轮播效果不平滑。)

3、实现轮播效果的核心思想:两种:

(1)使用animate()函数平滑改变图片容器的左外边距为-200px(设置左外边距为-200px,会使图片容器的左外边界往右收缩200px,视觉上图片容器向左移动了200px,进而使第一个图片向左移200px,进而第二个图片正好移动到了第一个图片的位置。。。),然后在回调函数内设置回图片容器的左外边距为0,并将第一个图片(t它已经在视口容器左边了)移除后加到最后一个图片的后面,然后重复上面的动作,这就实现了轮播。

(2)设置视口容器的position值设为relative,图片容器的position值设为absolute,使用animate()函数将图片容器的left值平滑设置为-200px,将图片容器向左移动一个图片的宽度(进而第一个图片到了第一个图片的位置。。。),在回调函数内将图片容器的left属性设置回0,并将第一个图片移除后添加到最后一个图片的后面,重复上述动作,实现轮播效果。

下面是实现代码:

第一种方法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(document).ready(function(){function rollOne(){$(".picBox").animate({marginLeft:"-200px"},2000,"linear",function(){$(this).css({marginLeft:"0px"});$(this).children("li").first().remove().clone(true).appendTo(".picBox");});}var startRollOne=setInterval(rollOne,2000);$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(rollOne,2000);});});</script><style>.box{width: 600px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box p{text-align: center;}.picBox{margin: 0px;padding: 0px;list-style: none;width: 1500px;position: absolute;}.picBox:hover{cursor: pointer;}.picBox li{float: left;}.picBox img{width: 200px;height: 240px;}</style>
</head>
<body>
<div class="box"><p> 图片轮播</p><ul class="picBox"><li><img src="a.jpg" /></li><li><img src="b.jpg" /></li><li><img src="c.jpg" /></li><li><img src="d.jpg" /></li><li><img src="e.jpg" /></li></ul>
</div>
</body>
</html>

第二种方法:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(document).ready(function(){function rollOne(){$(".picBox").animate({left:"-200px"},2000,"linear",function(){$(this).css({left:"0px"});$(this).children("li").first().remove().clone(true).appendTo(".picBox");});}var startRollOne=setInterval(rollOne,2000);$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(rollOne,2000);});});</script><style>.box{width: 600px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box p{text-align: center;}.picBox{margin: 0px;padding: 0px;list-style: none;width: 1500px;position: absolute;}.picBox:hover{cursor: pointer;}.picBox li{float: left;}.picBox img{width: 200px;height: 240px;}</style>
</head>
<body>
<div class="box"><p> 图片轮播</p><ul class="picBox"><li><img src="a.jpg" /></li><li><img src="b.jpg" /></li><li><img src="c.jpg" /></li><li><img src="d.jpg" /></li><li><img src="e.jpg" /></li></ul>
</div>
</body>
</html>




这篇关于jQuery实现图片轮播特性。使用animate函数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/997569

相关文章

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一:使用GROUP BY和HAVING子句方法二:仅返回重复值方法三:返回完整记录方法四:

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四