jquery实现滑动图片自己测试的例子


Posted in Javascript onNovember 05, 2013

最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度。

下面是我自己测试的例子:

//html代码 
<div class = "content"> 
<ul class = "list"> 
<li class = "liimg"><span class = "imgli img1"></span></li> 
<li class = "liimg"><span class = "imgli img2"></span></li> 
<li class = "liimg"><span class = "imgli img3"></span></li> 
<li class = "liimg"><span class = "imgli img4"></span></li> 
</ul> 
</div>

css代码
//css代码 
*{margin:0px;padding:0px;list-style-type:none;} 
body{text-align:center;} 
.content{width:590px;margin:0 auto;text-align:left;} 
.list{width:565px;margin:0px 9px;border:1px solid #eee;padding:5px;display:inline-block;overflow:hidden;} 
.liimg{padding:4px;border:1px solid #aaa;border-radius:2px;display:inline-block;*display:inline;*margin:0px 3px;background:#FFF;width:auto;} 
.imgli{margin:2px 0px;width:125px;height:300px;display:inline-block;} 
.img1{background:url(images/img1.jpg) no-repeat 50% 50%;} 
.img2{background:url(images/img2.jpg) no-repeat 50% 50%;} 
.img3{background:url(images/img3.jpg) no-repeat 50% 50%;} 
.img4{background:url(images/img4.jpg) no-repeat 50% 50%;}

js代码
//js代码 
//jquery实现图片滑动效果 
var zyljq = $.noConflict(); 
zyljq.fn.extend({ 
slideW:function(wid,speed){ 
//wid要设置的宽度,可以设置变得最小时的宽度或者变得最大时的宽度 
//如果不设置,则会根据绑定元素的宽度,计算设置默认宽度。 
//speed要设置的动画运行速度,可以是normal,slow,fast,也可以是毫秒数。 
//如果不设置,则默认速度是normal 
that = this; //绑定该事件的所有元素 
var eleNum = zyljq(this).size(); //获取图片的数量 
var curwidth = zyljq(this).width();//获取图片的原始宽度 
if(!wid){ 
wid = Math.round(curwidth*4/5); 
//如果没有设置动画的终止条件,则计算出默认的情况 
} 
if(zyljq.trim(speed) == ""){ 
//如果没有设置速度,则取默认速度 
speed = "normal"; 
} 
if(!isNaN(speed)){ 
//如果设置了负值,则变化 
speed = speed < 0?-speed:speed; 
} 
//计算照片的最大和最小宽度 
if(wid > curwidth){ 
widMin = Math.floor((eleNum*curwidth - wid)/(eleNum-1))+"px"; 
widMax = ((curwidth*eleNum) - widMin*(eleNum-1))+"px"; 
}else{ 
widMax = Math.floor((eleNum*curwidth - wid*(eleNum-1)))+"px"; 
widMin = wid+"px"; 
} 
//console.log("widMax="+widMax+";widMin="+widMin); 
//绑定hover事件 
zyljq(this).hover(function(){ 
zyljq(that).stop(); 
zyljq(this).animate({width:widMax},speed); 
zyljq(that).not(this).animate({width:widMin},speed); 
},function(){ 
zyljq(that).stop(); 
zyljq(that).animate({width:curwidth},speed); 
}); 
} 
});

下面是视图:
原始效果:
jquery实现滑动图片自己测试的例子 
鼠标悬停在第二个元素上之后的效果:
jquery实现滑动图片自己测试的例子 
在这个过程中,也回顾了一些常见的问题,比如:ie低版本下,margin:0 auto;不居中的问题,display:inline-block;不支持的问题。也许还有很多的问题没有注意到,如果您发现了什么问题,欢迎您的指导。大家可以共同进步。
Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
用js实现in_array的方法
Nov 05 #Javascript
jquery遍历数组与筛选数组的方法
Nov 05 #Javascript
javascript alert乱码的解决方法
Nov 05 #Javascript
jquery三个关闭弹出层的小示例
Nov 05 #Javascript
jquery ajax post提交数据乱码
Nov 05 #Javascript
jquery ajax属性async(同步异步)示例
Nov 05 #Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python 经典数字滤波实例
2019/12/16 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
什么是python的函数体
2020/06/19 Python
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
新年寄语大全
2014/04/12 职场文书
宣传口号大全
2014/06/16 职场文书
社区服务标语
2014/07/01 职场文书
财产分割协议书范本
2014/11/03 职场文书
导游词之无锡梅园
2019/11/28 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript