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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
原生js实现购物车功能
Sep 23 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php制作文本式留言板
2015/03/18 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
python 简单的多线程链接实现代码
2016/08/28 Python
django 发送手机验证码的示例代码
2018/04/25 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
python数据抓取3种方法总结
2021/02/07 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
extern是什么意思
2016/03/10 面试题
企业治理工作自我评价
2013/09/26 职场文书
感恩节活动方案
2014/01/27 职场文书
纪委立案决定书
2015/06/24 职场文书
感恩教育主题班会
2015/08/12 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js