jQuery实现图片滑动效果

思路：当鼠标进入元素时，触发盘旋中的第一个函数，离开时触发盘旋中的第二个函数。

如图所示：

代码如下：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style * { margin : 0；padd : 0；} ul { width : 1000 pxmargin : 0 auto } Li { cursor :指针；border: 1px实心# fffdisplay:内联块；宽度： 198像素；高度： 250像素；向左浮动：飞越：隐藏；背景-颜色： # f7f 7；相对位置：} li .淡化{ font-family: '微软雅黑；显示器：无；宽度： 320 px高度： 270像素；背景技术： # 090;绝对位置：left : 0pxtop : 0pxz-index : 19；}李。img 1 {宽度： 110 px高度： 110px文本对齐：中心；绝对位置：top : 22px right : 41 pxz-index : 99；}李。img 2 {宽度： 110 px高度： 110px文本对齐：中心；绝对位置：top : 22pxleft :-110 px；z指数： 99；}李。txt 1 {宽度： 198 px高度： 100像素；颜色： # 999999绝对位置：top : 145 pxleft : 0pxz-index : 99；文本对齐：中心；}李。txt 2 {宽度： 198 px高度： 100像素；颜色： # a9 cf 4f绝对位置：top : 145 px right :-240 px；z指数： 99；文本对齐：中心；}/style脚本src=' http :http://代码。jquery。com/jquery-1。8 .0 .量滴js '/script/head dydiv class=' main ' ul Li div class=' fade '/div class=' img 1 ' img src=' http : img/1。png '/div class=' img 2 ' img src=' http 3360 img/1-1。png '/div class=' txt啦啦啦啦啦/div div class='txt2 '是是是是是/div/Li Li div class=' fade '/div class=' img 1 ' img src=' http : img/2。png '/div class=' img 2 ' img src=' http : img/2-2。png '/div class=' txt 1 '啦啦啦啦啦/div div class='txt2 '是是是是是/div/Li Li div class=' fade '/div class=' img 1 ' img src=' http : img/1。png '/div class=' img 2 ' img src=' http : img/1-1。png '/div class=' txt 1 '啦啦啦啦啦/div div class='txt2 '是是是是是/div/Li Li div class=' fade '/div class=' img 1 ' img src=' http : img/2。png '/div class=' img 2 ' img src=' http : img/2-2。png '/div class=' txt 1 '啦啦啦啦啦/div div class='txt2 '是是是是是/div/Li/ul/div脚本$(function(){ $(' ul Li ').悬停(function(){ $(this)).儿童()。停止（假，真);$(这个)。查找('。淡出')。fadeIn('慢');$(这个)。查找(' . img1 ').动画({right:-110}，400)；$(这个)。查找(' . img2 ').动画({left:41}，400)；$(这个)。find('.txt1 ').动画({left:240}，400)；$(这个)。find('.txt2 ').动画({right:0}，400)；}，function(){ $(this).儿童()。停止（假，真);$(这个)。查找('。淡出')。fadeOut("慢");$(这个)。查找(' . img1 ').动画({right:41}，400)；$(这个)。查找(' . img2 ').动画({left:-110}，400)；$(这个)。find('.txt1 ').动画({left:0}，400)；$(这个)。find('.txt2 ').动画({right:-240}，400)；})})/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！