jQuery实现的小图列表,大图展示效果幻灯片示例
本文实例讲述了jQuery实现的小图列表,大图展示效果幻灯片。分享给大家供大家参考,具体如下:
运行效果图如下:
全部代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312" /> <title>~~~</title> <!--#include file="../conn/conn.asp"--> <script src="../js/jquery.js"></script> <% p_id=request("p_id") sql1="select * from [share_pic] where p_id="&p_id set rs1=server.createobject("adodb.recordset") rs1.open sql1,conn,1,3 k=1 %> <style type="text/css"> body{background-color:#000000;height:100%} .td_lr {width:50px; vertical-align:middle; text-align:center; cursor:pointer;} #branding{position:absolute; visibility:visible; height:84px; left:0px; overflow:hidden; z-index:2;} #simgContainer{ width:100000px;float:left;} #simgContainer img{ width:75px; height:75px;cursor:pointer;} .td_c{ text-align:center;vertical-align:middle;} .now{ border:1px solid RED;} </style> <script type="text/javascript" language="javascript"> function tdmover(tag) { $("#" + tag + "img").attr("src", "PIC/" + tag + "2.jpg") } function tdmout(tag) { $("#" + tag + "img").attr("src", "PIC/" + tag + "1.jpg") } /////////////////// $(function () { init(); initEvent(); }); function initEvent() { $("#simgContainer img").bind("click", function () { setImg($(this)); }); $(window).bind("resize", function () { //init(); }); } function init() { var h = $(window).height(); var w = $(window).width(); $("#table1").height(h + (-20)); $("#branding").width(w); $("#branding").css("top", h + (-80)); var arr = $("#simgContainer img"); var c_index = arr.length / 2; var cobj = $(arr[c_index]); setImg(cobj); } function setImg(target) { $(".now").removeAttr("class"); var w = $(window).width(); if (window.MARGINLEFTVALUE == undefined) { window.MARGINLEFTVALUE = w / 2 - target.position().left - 38; } else { window.MARGINLEFTVALUE = window.MARGINLEFTVALUE - target.position().left - 38 + w / 2 } $("#simgContainer").css("margin-left", window.MARGINLEFTVALUE + "px"); //.animate({ marginLeft: window.MARGINLEFTVALUE + 'px' }, 1000); $("#bimg").attr("src", target.attr("alt")); target.attr("class", "now"); return; } function move(tag) { window.FLAG = true; var target; if (tag == 'l') { target = $(".now").prev(); if (target.attr("src") == undefined) { return false; } } else { target = $(".now").next(); if (target.attr("src") == undefined) { return false; } } setImg(target); return false; } </script> </head> <body> <input type="hidden" id="nowIndex" value="1" /> <table id="table1" width="100%"> <tr> <td class="td_lr" onmouseover="tdmover('l')" onmouseout="tdmout('l')" onclick="move('l')"><img id="limg" src="PIC/l1.jpg" /></td> <td class="td_c"><img id="bimg" src="PIC/109.gif" /></td> <td class="td_lr" onmouseover="tdmover('r')" onmouseout="tdmout('r')" onclick="move('r')"><img id="rimg" src="PIC/r1.jpg" /></td> </tr> </table> <div id="branding"> <div id="simgContainer"> <%do while not rs1.eof %> <img id="<%="img"+k %>" src="<%=rs1("p_spic")%>" alt="<%=rs1("p_bpic")%>" /> <% rs1.movenext if rs1.eof then exit do k=k+1 loop rs1.close set rs1=nothing %> </div> </div> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- jQuery实现等比例缩放大图片让大图片自适应页面布局
- 基于jquery的防止大图片撑破页面的实现代码(立即缩放)
- jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
- jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
- jQuery实现鼠标滑过预览图片大图效果的方法
- jQuery实现大图轮播
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- jQuery实现点击小图片淡入淡出显示大图片特效
- jQuery实现点击查看大图并以弹框的形式居中
- 基于jQuery插件实现点击小图显示大图效果
- jquery实现移动端点击图片查看大图特效
- jQuery实现点击小图显示大图代码分享
- jquery 图片点击放大预览功能详解
相关文章
jcarousellite.js 基于Jquery的图片无缝滚动插件
基于Jquery的图片无缝滚动插件,需要的朋友可以参考下。2010-12-12jQuery-onload让第一次页面加载时图片是淡入方式显示
第一次打开一个页面时,让加载好的图片先隐藏,然后再执行动画fadeIn,这里的load事件:当所有子元素已经被完全加载完成时,load事件被发送到这个元素2012-05-05一个基于jQuery的树型插件(OrangeTree)使用介绍
这个样式大家就将就一下吧!我将这个无限级树型插件命名为桔子树,需要的朋友可以参考下2012-05-05
最新评论