jquery自测试滑动图片的例子

最近回顾之前的一些基础知识，用jquery写了一个图片滑动的插件。虽然还存在一些问题，但它的用法很简单。只需将slideW()函数绑定到目标元素。该功能最多支持两个输入，即画面变化后的宽度和动画的速度。如果没有输入，将采用默认的宽度和速度。下面是我自己测试的一个例子：复制代码如下：//html code div class=' content ' ul class=' list ' Li class=' liimg ' span class=' img liimg 1 '/span/Li class=' liimg ' span class=' imgli img 2 '/span/Li Li class=' liimg ' span class=' imgli img 3 '/span/Li class=' liimg ' span class=' img img lig4 '/span/Lipadding:0px列表样式-type : none；}正文{ text-align : center；} .内容{ width:590pxmargin:0 autotext-align : left；} .列表{ width:565pxmargin:0px 9pxborder:1px固体# eeepadding:5pxdisplay : inline-block；飞越：隐藏；} .liimg { padding:4pxborder:1px实心# aaa边框-radius :2 px；display : inline-block；* display:inline* margin:0px 3px背景： # FFF；宽度： auto；} .imgli { margin:2px 0px宽度width:125px高度：300 px；display : inline-block；} . img 1 { background : URL(images/img 1 . jpg)no-重复50% 50%；} . img 2 { background : URL(images/img 2 . jpg)no-重复50% 50%；} . img 3 { background : URL(images/img 3 . jpg)no-重复50% 50%；} . img 4 { background : URL(images/img 4 . jpg)no-重复50% 50%；} js代码复制代码如下： //js代码//jquery实现图片滑动效果var zyljq=$。noConflict()；zyjq . fn . extend({ slide w : function(wid，speed) {//wid，可以设置最小宽度或最大宽度。//如果不设置，则根据绑定元素的宽度计算设置默认宽度。//速度要设置的动画运行速度可以是正常、慢速、快速或毫秒。//如果没有设置，默认速度正常即=这个；//绑定事件var eleNum=zyljq(this)的所有元素。size()；//获取图片数var curwidth=zyljq(this)。宽度()；//获取图片的原始宽度if(！wid){ wid=math . round(cur width * 4/5)；//如果没有设置动画终止条件，计算默认条件} If(zyljq . trim(speed)=' '){//如果没有设置速度，取默认速度speed=' normal} if(！IsNaN(speed)){ //如果设置了负值，则更改速度=speed 0？-速度speed:speed}//计算最大和最小宽度if (widcur width) {widmin=math。floor((elenum * cur width-wid)/(elenum-1))“px”；widMax=((cur width * eleNum)-widMin *(eleNum-1))' px '；} else { WiDMax=Math . floor((eleNum * cur width-wid *(eleNum-1)))' px '；widMin=wid ' px}//console . log(' WiDMax=' WiDMax '；widMin=' widMin '；//绑定悬停事件zyljq (this)。hover(function(){ zyljq(the))。stop()；zyljq(这个)。动画({width:widMax}，速度)；zyljq(那个)。不是(这个)。动画({width:widMin}，速度)；}，function(){ zyljq(即)。stop()；zyljq(那个)。动画({width:curwidth}，速度)；});} });观点如下：原创效果：。

悬停在第二个元素上后的效果：。

在这个过程中，还回顾了一些常见的问题，如：ie低版本的margin:0 auto不居中的问题，显示：内嵌块；不支持的问题。可能还有很多问题没有被注意到。如果您发现任何问题，欢迎您给予指导。大家可以一起进步。