JQ轮播
首先是html结构,一个简单的轮播,主要分为三大层:div>ul>li,li里面的img图片。
其次,css样式:div固定住宽高,overflow:hidden;ul的宽度建议是动态获取(下一步会讲是怎么获取);关于li我习惯使用浮动,让他们依次排列,在ul上要记得清楚浮动(clear:both)。
重要的是jquery的方法,主要有用到的有animate(),setInterval(),hover()。在写方法之前,缕清一下动效的逻辑:图片依次循环自右向左滑过,当滑完最后一张时,第一张显示,如此重复
1、获取li的个数length和宽度width
第一个参数properties:css的属性和值的对象,决定动画的效果,是上下还是左右等;
第二个参数duration:完成一个动画的时间,默认是400,单位是毫秒;
第三个参数easing:动画过渡使用的缓动函数,默认是swing(linear,swing),一般不用这个参数;
第四个参数complete:是指完成动画后执行的操作。
我们的动效是自右向左,所以通过改变ul的margin-left值来实现;
$('ul').animate({
'marign-left': -liWidth*index
},3000,function(){
if(index==len){
index=0;
$('ul').css({'margin-left':'0px'})
}
})
其中index指的是li的索引值,当li的索引值等于li的length值的时候,也就是动画执行到了最后一张,那么直接让ul的margin-left为0,li的索引值也为0。
这样还存在一个隐患,暂时不提。
下一步,当鼠标离开div的时候,图片自动播放。这是要用到hover()和setInterval()
setInterval()在W3C是这样解释的:按照指定的周期(以毫秒计)来调用函数或计算表达式。不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
JQ轮播的更多相关文章
- jq轮播图插件
/* * 使用说明 * * 1:需要提供一个标签 * 2:lis:图片的个数 * 3:轮播图的大小 width ,height * 4:图片的地址imgs[0].carou ...
- jq 轮播图
<style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} </style> ...
- jq轮播图插件—手写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- jq 轮播图 上下自动滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 轮播图 转载-周菜菜
<style> li{list-style-type:none ; display:inline; width:90px; height:160px; float:left; } .pic ...
- jq轮播图实现
html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...
- jq轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq demo 轮播图,图片可调用,向左,自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图,图片可调用,向上,自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
随机推荐
- 基于JSON的级联列表实现
html代码: <select id="provice" onChange="setCity()"> <option value=" ...
- Performance Considerations for Entity Framework 4, 5, and 6
Performance Considerations for Entity Framework 4, 5, and 6 https://msdn.microsoft.com/en-sg/data/hh ...
- MYSQL单双向同步
Master:192.168.1.101 Slave :192.168.1.102 单向同步(一) 进入Master启动MYSQL [root@localhost ~]# service mysql ...
- SQLBulkCopy使用实例--读取Excel写入数据库/将 Excel 文件转成 DataTable
MS SQL Server 提供一个称为 bcp 的流行的命令提示符实用工具,用于将数据从一个表移动到另一个表(表可以在不同服务器上). SqlBulkCopy 类允许编写提供类似功能的托管代码解决方 ...
- Python Beautiful Soup学习之HTML标签补全功能
Beautiful Soup是一个非常流行的Python模块.该模块可以解析网页,并提供定位内容的便捷接口. 使用下面两个命令安装: pip install beautifulsoup4 或者 sud ...
- 到入百度LSS framework Reason: image not found
dyld: Library not loaded: @rpath/VideoCore.framework/VideoCore Referenced from: /var/containers/Bund ...
- SQL SERVER 2008 r2安装失败之Integration Service
因工作需要,遂把以前的2008升级到r2,升级失败,具体原因忘了,卸载2008,清了注册表删了文件,结果安装的时候失败了,如下图: 下一步-有错误日志和错误的序列号,错误日志在C:\Program F ...
- net iis 部署中出现的问题及解决方案
1.HTTP500.21 错误 解决方法:重新注册asp.net C:\Windows\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe –i ...
- 基础小功能之(1)震动,(2)检测app是否在前台运行
//开启震动 //添加权限<uses-permission android:name="android.permission.VIBRATE" /> private v ...
- 使用spring @Scheduled注解执行定时任务、
http://blog.csdn.net/sd4000784/article/details/7745947,留下来备用.