jquery特效幻灯片效果示例代码

jquery特效幻灯片效果，效果图如下

复制代码代码如下：DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf8'/titlejquery特效/title style /* CSS Document */body，h1，h2，h3，h4，h5，h6，p，ul，ol，li，form，img，dl，dt，dd，table，th，td，blockquote，fieldset，div，strong，label，em { margin:0划水：0;边界：ol、Li {列表式：无；}输入，按钮{ margin :0 font-size :12 px；垂直对齐：毫米；}正文{ font-size :12 px字体系列Helvetica阿里亚尔：无衬线；文本对齐：居中；margin:0 auto}表格{边框-折叠：折叠；边框间距：0;} a { color: # 333文本装饰：无；} .盒子{宽度：420pxmargin:20px汽车；位置：相对；飞越：隐藏；向左文本对齐：} .box img { border:0px宽度宽度：420px}。大{宽度：100%;float:left高度：196 px飞越：隐藏；边距-底部：2 px} .大a { display:none}。大跨度{ position : absolute eleft :0 top :167 px font-size :13 px；color: # fffz索引：11;高度：30 px线高：30 px文本缩进：1 em宽度：100%;)} .数量{宽度：424px右边距：-24px；float : leftheight :53 xpadding-top :2 px；} .num Li { width :99 pxpadding-top :5 px；左填充：1 px光标：指针指针；float:left右边距：6 px高度：48 px} .num img { width:98px}。num li.on{ background:url(./images/bg01。gif)不重复0 0；} .txt BG { position : absolute eleft :0 top:167 px宽度：100%;高度：30 px背景技术： # 000;opa city 33600.5 filter : alpha(不透明度=50);z索引：10;}/style脚本类型=' text/JavaScript ' src=' http : js/jquery。量滴js '/script脚本类型=' text/JavaScript ' var timer；var I=-1；定义变量偏移量=3000;函数roll(){ I；if(i3){ I=0；}幻灯片；定时器=setTimeout(滚动，偏移)}函数幻灯片(i){ $(' .大a ').方程式(I ).fadeIn().兄弟姐妹()。hide()；$('.数李' .方程式(I ).兄弟姐妹()。移除CLaSS(' on ')；$('.数李' .方程式(I ).添加CLaSS(' on ')；}函数stopBig(){ $(' .大')。悬停(函数(){ clearTimeout(计时器));}，function(){ timer=setTimeout(roll，offset)；});}函数stoproll(){ $(' .数李' .悬停(函数(){ clearTimeout(计时器));i=$(这个)。index()；幻灯片；}，function(){ timer=setTimeout(roll，offset)；})} $(function(){ roll()；停止滚动()；stopBig()})/script/head body div class=' box ' div class=' txt BG '/div class=' big ' a href=' # ' style=' display : block ' img src=' http : images/1。jpg '/span标题1/span/a a href=' # ' img src=' http : images/2。jpg '/span标题2/span/a a href=' # ' img src=' http : images/3。jpg '/span标题3/span/a a href=' # ' img src=' http : images/4。jpg '/span标题4/span/a/div ul class=' num ' Li class=' on ' img src=' http : images/1s。jpg '/Li Li img src=' http : images/2s。jpg '/Li Li img src=' http : images/3s。jpg '/李丽丽img src=' http : images/4s。jpg '/Li/ul/div/body/html