本文实例讲述了jQuery css实现的切换图片功能代码。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html标题演示/标题脚本类型=' text/JAVAScript ' src=' http : jquery。js '/脚本样式类型=' text/CSS '正文{ margin :0划水：0;} .容器{ border:6px实心灰色；背景：黑色；宽度宽度：600像素高度：400 px位置：相对；左侧：50%;边距-左侧：-300像素；边界半径：6 px-web套件-边框-半径：6 px-moz-边界-半径：6 px飞越：隐藏；} .文本中心{ text-align :居中；} h1 { font-size :50 px颜色：灰色字体粗细：加粗；} .imgUL { width :100%；高度：100%;margin :0 pxpadding :0 pxlist-style : none；} .imgUL Li { float : leftmargin :0 pxpadding :0 px高度：100%;颜色：灰色字体粗细：加粗；文本对齐：居中；font-size :100 px线高：400 px} .page ul { position : relative top :-40px；高度：40 px列表式：无；余量：0pxpadding:0px右浮动：} .第页li { float:left显示：块；宽度：36 px高度：36 pxborder:2px纯红；边距-左侧：5 px边界半径：4 px-网络套件-边框-半径：4 px文本对齐：居中；-moz-边界-半径：4 px线高：36 px颜色：灰色字体粗细：加粗；光标：指针指针；} .pagel Li :悬停{后台： # 5ACF 00颜色：黑色；} .李。活动{后台： # 5ACF 00颜色：黑色；}/样式脚本类型='text/javascript' $(文档)。ready(function(){ var autoInterval=null，imgUL=$(').imgUL ')，imglist=imgUL。children(' Li ')，liListLength=imgliList.length，pageUL=$(').pagel ')，pagel list=pagel。子代(' Li ')，页面列表长度=页面列表。length，//初始化活动页面li=$(页面列表[0])；活动页面LI。add CLaSS(' active ')；imglist。宽度(600)；伊姆古尔。宽度(LilistLength * 600)；$('.帕古尔李' .将鼠标悬停在(function(){ MouseOveriMate(this))上；}).mouseout(函数(){ createInterval()；});创建间隔()；函数mouseoverimate(_ this){ clearInterval(自动间隔);李。移除类(“活动的”)；activePageLi=$(_ this)；var页码=Parseint(Activipageli。html())；活动页面LI。add CLaSS(' active ')；伊姆古尔。动画({ '左边距' :-600 *(页码- 1) },10);}函数create interval(){ Autointerval=SetInterval(function(){ var page no=parsent(active page Li。html())；页码；if(页码lillistlength){页码=1；}李。移除类(“活动的”)；activePageLi=$(页面列表[页面编号-1]);活动页面LI。add CLaSS(' active ')；伊姆古尔。动画({ '左边距' :-600 *(页码- 1) },1100);}, 1500);} });/script/head body h1 class=' text-center ' demo/h1 div class=' container ' id=' container ' ul class=' imgUL ' Li第1页/Li Li第2页/Li Li第3页/Li Li第4页/Li Li第5页/Li第6页/Li/ul class=' page ul ' Li 1/李丽丽2/李丽丽/李丽丽/李丽丽Li/ul/div/body/html更多关于jQuery特效相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 及《jQuery动画与特效用法总结》

希望本文所述对大家jQuery程序设计有所帮助。