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


Posted in Javascript onOctober 25, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JavaScript prototype属性详解
Oct 25 #Javascript
对Angular.js Controller如何进行单元测试
Oct 25 #Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 #Javascript
input file上传 图片预览功能实例代码
Oct 25 #Javascript
Node.js开启Https的实践详解
Oct 25 #Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 #Javascript
利用yarn实现一个webpack+react种子
Oct 25 #Javascript
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
JQuery 入门实例1
2009/06/25 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Python中私有属性的定义方式
2020/03/05 Python
Python reduce函数作用及实例解析
2020/05/08 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
工商企业管理专业自荐信范文
2014/04/12 职场文书
实习评语大全
2014/04/26 职场文书
关于建议书的格式范文
2014/05/20 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
历史博物馆观后感
2015/06/05 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle