當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery图片幻灯片（小图列表，大图展示）

發布時間：2025/4/14 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery图片幻灯片（小图列表，大图展示）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

先來個效果圖（沒有服務器，沒辦法提供演示版）

效果不如FLASH版的好，接下來我就發出FLASH版的來

全部代碼如下所示

<!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>  <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" οnmοuseοver="tdmover('l')" οnmοuseοut="tdmout('l')" οnclick="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" οnmοuseοver="tdmover('r')" οnmοuseοut="tdmout('r')" οnclick="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>

轉載于:https://www.cnblogs.com/liulun/archive/2010/11/07/1871145.html

總結

以上是生活随笔為你收集整理的jquery图片幻灯片（小图列表，大图展示）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：什么是全角和半角？
下一篇：一起来用Websocket（一）开篇 W