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的超简单上下翻
Apr 20 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
a标签click和href执行顺序探讨
2014/06/23 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
js实现分割上传大文件
2016/03/09 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python实现扫雷游戏
2020/03/03 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
是否有自动比较结构的方法
2015/06/03 面试题
十八大演讲稿
2014/05/22 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python