jquery图片轮播思路
开始就隐藏img不要用js去做。js操作dom影响速度,第二是需要在js加载完了才会把图片隐藏,这会导致没加载完前你的图片全部是显示的。 用css来隐藏img,另外图片宽高都写在img里减小渲染框架时间。
<
style
>
#focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/}
</
style
>
<
div
id
=
"focus"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
<
img
src
=
"xx.jpg"
width
=
"500"
height
=
"200"
>
</
focus
>
.....引入jQuery
<
script
>
//将script写在最底部避免js阻塞页面加载
var index=0;//当前显示的第几张图,默认开始为0;
var mg=$("#focus img");//将焦点图储存为一个变量方便调用节省下载调用查询时间。
var len=mg.length;//焦点图图片数量
function play(n){
mg.eq(n).fadeIn(200).siblings("img").fadeOt(200);
//eq表示第几个标签里面的n就是代表的第几个img标签是从0开始数的。这里用siblings而不是先hide全部在fadein,siblings代表的是除开当前标签以外的所有同级标签。使用siblings来处理这样的情况速度会比你老师写的快很多倍。简单来讲siblings就是除开当前显示的这个以外的所有统计图片全部fadeOut
}
setInterval(function(){
showPics(index);
index++;
if(index==len){//当当前播放的索引值等于总图片数就重置为0,重新开始循环
index=0;
}
},2000);//将function写在setInterval里更简洁。这样写默认开始2秒就开始播放,如果想开始2秒就播放第二张,那就得把最前面的index=1;因为初始显示的就是第一张。所以2秒后应该显示第二张而不是还是第一张
</
script
>
jquery图片轮播思路相关推荐
- jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件 图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
- 12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
- 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
- jQuery图片轮播(焦点图)插件(转载)
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments 特点:兼容IE6+,Chrome,Firefox,Opera,saf ...
- html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员 只看不发了 提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
- 支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
- html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
最新文章
- 大数据的发展,伴随的将是软件工程师的渐退,算法工程师的崛起
- 七、Excel中图表制作和展示
- boost::graph模块实现Graphviz DOT 语言阅读器
- 8.Excel数据与指标概述
- 作者:吴东亚(1972-),女,中国电子技术标准化研究院信息技术研究中心高级工程师、副主任,国家OID注册中心副主任。...
- 快手通过标签添加的我_快手内容运营技巧:快手创作者如何蹭热点?快速上热门...
- extjs Grid (二)
- oracle主键id自动自增_Oracle主键ID设置自动增长(序列+触发器)
- 【openjudge】 CDQZ challenge 4
- SolarWinds 公司:Web Help Desk 实例正遭攻击
- 90后渐成互联网基金销售平台的购买主力
- windows server 2008 远程桌面(授权、普通用户登录)
- java同构数_统计同构数关键算法
- linux不识别iwconfig,CentOS中iwconfig命令not found的解决方法
- python解决约瑟夫问题
- 苹果4s变php服务器,苹果4S改装无线充电
- 如何从电脑直接控制安卓手机 监控安卓手机 安卓手机如何控制安卓手机
- 改善磁带存储性能的五种方法
- WPE教学之-截取操作篇
- Java基础 -> Java死锁如何避免?
热门文章
- JDK9对String字符串的新一轮优化,不可不知
- ps 证件照(1,2寸)
- Automatic White Balance(AWB)/Color Constancy(CC)系列论文
- 斜杠'/' 和反斜杠'\'
- python股票自动 选股 与 止损 止盈 脚本
- 测者的测试技术笔记:Screenplay 模式(Journey 模式)
- QtVirtualKeyboard 虚拟键盘美化
- 邓应海:焦点转向美国数据,央行会议!最新黄金走势分析
- 作为一名大数据工程师你需要掌握Spark深度学习
- Self-augmented Unpaired Image Dehazing via Density and Depth Decomposition程序运行记录