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>
<!--#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" ο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图片幻灯片（小图列表，大图展示）相关推荐

php图片点击查看大图,jQuery点击小图看大图，大图查看内容详情所有图片
jQuery点击小图看大图,大图查看内容详情所有图片: html代码如下: × < > CSS代码如下: * { margin:0; padding:0; } body { overflo ...
JQUERY 图片幻灯片效果插件
因为项目中使用的slider插件的api不够强大,所以采用了另外一个功能比较强大的插件 bxslider. 官网地址为:http://bxslider.com/examples/custom-next ...
10个用jQuery实现图片幻灯片/画廊效果和源码
jQuery作为一个应用最广泛的JavaScript框架之一,第三方开发者不断地为其开发出新的 jQuery 插件应用,从而使得jQuery可以帮助用户实现各种各样不同寻常的 Web 效果,作为最常使 ...
Jquery 图片浏览插件
原文来源:http://www.techolics.com 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最 ...
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
<40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一> <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三> <40个有创意的jQuery图片和内容 ...
html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法
本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: ul{ list-style:none; } li{ float:left; m ...
十个jQuery的幻灯片图片轮播切换插件[转]
1.Simple Controls Gallery 是基于jQuery的一个幻灯插件,非常不错,详细演示及下载请点击下面的链接 http://www.dynamicdrive.com/dynamici ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
40 个顶级 jQuery 图片、内容滑块和幻灯片
在这个快速发展的网络世界中,我们使用图片.内容滑块和幻灯片来给网站实现良好.有吸引力的外观.你可以吸引浏览者借助图像滑块让网站更加具有活力.使用 JavaScript 可以轻松实现轻量级的图片和内容滑 ...

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

jquery图片幻灯片（小图列表，大图展示）相关推荐

最新文章

热门文章