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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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
Ajax PHP分页演示
2007/01/02 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php use和include区别总结
2019/10/13 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python使用range函数计算一组数和的方法
2015/05/07 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python语言快速上手学习方法
2018/12/14 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python3 实现调用串口功能
2019/12/26 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
安全员岗位职责
2013/11/11 职场文书
中英文求职信范文
2014/01/27 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
新学期决心书
2014/03/11 职场文书
乡镇办公室工作决心书
2014/03/11 职场文书
政风行风建设整改方案
2014/10/27 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
大学生入党自传2015
2015/06/26 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
公司员工管理制度
2015/08/04 职场文书
升学宴家长答谢词
2015/09/29 职场文书
Nginx配置80端口访问8080及项目名地址方法解析
2021/03/31 Servers
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电