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图片滚动与幻灯片的实例代码
1.图片滚动 复制代码 代码如下: <!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> <title>&l
-
20个非常棒的 jQuery 幻灯片插件和教程分享
滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程. > Slider Gallery with jQuery Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slideshow Using jQuery Simple JQuery Image Slide Sho
-
jQuery 幻灯片插件(带缩略图功能)
应朋友的邀请,帮他公司做一个幻灯播放效果,效果如下: 缩略图正中间的为当前播放到的图片,两边呈发散状,逐渐缩小并降低透明度.假设当前正播放到第0张图片,则排列情况如下: 0 1 4 2 3 按逆时针方向转一张图后的排列情况如下: 4 0 3 1 2 这个只是缩略图的播放效果,缩略图轮转时,后面有对应大图跟着从右到左滚进,并且大图进入的速度要对应着缩略图轮转,整体效果如下: 本人考虑将缩略图轮转与大图的滚进分开两部分,缩略图轮转做为一个单独的jQuery插件,由此插件中的事件带动大图的滚进.下面先
-
js实现幻灯片效果(基于jquery插件)
使用jquery插件jquery.smallslider.js也能实现幻灯片效果. htm代码如下: 复制代码 代码如下: <div id="flashbox" class="smallslider"> <ul style="position: absolute; top: 0px; width: 3225px;"> <li class="" style="float: left;&qu
-
分享10篇优秀的jQuery幻灯片制作教程及应用案例
幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天要给大家分享的是10篇非常棒的 jQuery 幻灯片教程及16个优秀的 jQuery 幻灯片应用案例. 10篇 jQuery 幻灯片制作教程Create Beautiful jQuery slider tutorial jQuery Plugin – Feature List Create an Image Rotator with Description (CSS/jQuery) Moving Box
-
基于jquery的15款幻灯片插件
1,Gallerific Galleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果,包括缩略图.图片标题和描述等详细功能,是一个非常不错的高质量画廊相册展示工具. 2,ZoomImage zoomimage ,以一种独具魅力的方式展示图片效果.缩略图链接在本页弹出大图,并且可以可以随意拖拽该悬浮图片. 3,EasySlider Easy Slider 可以实现图片或其他任意内容,在水平或垂直方向上的滑动效果,你还可以通过 CSS 自定义
-
8款非常棒的响应式jQuery 幻灯片插件推荐
这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推
-
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
How To Build a Sliding Feature Slideshow with jQuery Fullscreen Gallery with Thumbnail Flip Moving Boxes Content with jQuery Animated Skills Diagram with Raphaël jQuery and CSS single page portfolio, a vertical parallax navigation How to Make Auto-Ad
-
jQuery Tools tab(幻灯片)
html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
-
10个基于Jquery的幻灯片插件教程
常听有人说jquery 比较难学,只要你感兴趣,实现幻灯片效果还是蛮有乐趣的,下面的Jquery 幻灯片教程将引领你进入Jquery插件开发的喜悦中,希望对大家有帮助. 1. jQuery Easy Slides v1.1 在所有的Jquery幻灯片插件中,Jquery easy sildes算是最容易使用的一个. 2. The Piecemaker XML Gallery 非常酷的具有3D效果的jquery 插件,有详细的制作方法,有兴趣的朋友可以研究一下它的源代码.
-
基于Jquery制作的幻灯片图集效果打包下载
待改进部分 1.大图可根据浏览器分辨率自动缩放,目前是按照固定的宽和高显示,超出部分隐藏. 2.大图现在是直接载入了所有,若图片很多时,体验不好.可改为异步加载,或者延迟加载,这个可以用jquery控件lazyload实现. 3.缩略图是根据上传时设定的参数直接生成的,如果是竖形图片,会出现被压缩的情况.可以改为只显示局部,超出部分隐藏. 4.缩略图列表的滑动采用了jcarousellite插件,如果将幻灯片提取为插件的话,需要整合为一个. 5.目前大图区域和缩略图区域是相对独立的,优点是比较直
-
30个精美的jQuery幻灯片效果插件和教程
这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力.如果你想知道这是如何实现的,那么本文收集的30个幻灯片插件和教程将帮助您实现这种效果. JCOVERFLIP Live Demo CREATE A CUSTOM IMAGE GALLERY WITH JCAROUSEL Live Demo COIN SLIDER Live Demo LOOPEDSLIDER Live Demo NIVO SLIDER Live Demo COLORFUL SLIDERS WITH JQUER