jQuery实现的小图列表,大图展示效果幻灯片示例

本文实例讲述了jQuery实现的小图列表，大图展示效果幻灯片。分享给大家供大家参考，具体如下：

运行效果图如下：

全部代码如下所示：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta HTTP-EQUIV=' Content-Type ' Content=' text/html；charset=gb2312' /title~~~/title！-#包含文件='./conn/conn.asp' -脚本src='http:/js/jquery。js '/脚本% p _ id=请求(' p _ id ')SQL 1='从[share _ pic]中选择*其中p _ id=' p _ idset rs1=服务器。createobject(' adodb。记录集)rs1。打开SQL 1，conn，1，3k=1% style type=' text/CSS ' body {底色： # 000000；高度：100%}。td _ lr { width:50px垂直对齐：毫米；文本对齐：居中；光标：指针指针；} #品牌{ position:absolute绝对值可见性：可见；高度：84pxleft:0px飞越：隐藏；z索引：2;} # SimgContainer { width :100000 px；float : left } # Simgcontainer img { width :75 px；高度height:75pxcursor:pointer指针指针；}.TD _ c { text-align : center垂直对齐：毫米；}.现在{ border:1px固体红色；}/style脚本类型=' text/JavaScript '语言=' JavaScript '函数TD Mover(标记){ $('# '标记img ').attr('src '，' PIC/' tag '2.jpg') }函数tdmout(标记){ $('# '标记' img ').attr('src '，' PIC/'标记' 1。jpg ')}////////////////$(function(){ init()；init事件()；});函数initEvent(){ $(' # SimgContainer img ').bind('click '，function(){ setImg($(this))；});$(窗口)。bind('resize '，function(){//init()；});}函数init() { var h=$(window).高度();var w=$(窗口)。宽度();$('#table1 ').高度(h(-20))；$(' #品牌')。宽度(w)；$(' #品牌')。css('top '，h(-80))；var arr=$(' # Simgcontainer img ')；var c _ index=arr。长度/2；var cobj=$(arr[c _ index])；setImg(cobj)；}函数setImg(目标){ $('。现在')。移除attr(' class ')；var w=$(窗口)。宽度();如果(窗口MARGINLEFTVALUE==未定义){ window .MARGINLEFTVALUE=w/2-目标。位置().左-38;} else { window .MARGINLEFTVALUE=窗口MARGINLEFTVALUE-目标。位置().左- 38 w/2 } $('#simgContainer ').css(“”左边距，窗口MARGINELFTVALUE ' px ')；//.制作({ marginLeft:窗口的动画. MARGINLEFTVALUE ' px ' }，1000)；$('#bimg ').attr('src '，目标。attr(' alt ')；target.attr('class '，' now ')；返回；}函数移动(标记){窗口.FLAG=真；定义变量目标；如果(标记=='l') { target=$(' .现在')。prev()；if(目标。attr(' src '==未定义){ return false} } else { target=$(' .现在')。next()；if(目标。attr(' src '==未定义){ return false} } setImg(目标);返回false }/script/head dyinput type=' hidden ' id=' now index ' value=' 1 '/table id=' table 1 ' width=' 100% ' trtd class=' TD _ lr ' onmouseover=' TD Mover(' l ')' onmouseout=' TD mout(' l ')' onclick=' move(' l ')' img id=' limg ' src=' http 3360 pic/l . jpg '/tdtd class=' TD _ c ' img id=' BIM更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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