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 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jquery实用代码片段集合
Aug 12 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
用javascript实现倒计时效果
Feb 09 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
用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
图解上海144收音机
2021/03/02 无线电
php 数组的一个悲剧?
2011/05/11 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JS实现字体选色板实例代码
2013/11/20 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
浅析Ajax语法
2016/12/05 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
优秀教师先进事迹
2014/01/22 职场文书
股东合作协议书
2014/09/12 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
音乐会主持人开场白
2015/05/28 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android