jquery实现简单易懂的图片展示小例子


Posted in Javascript onNovember 21, 2013

HTML代码:

<body> 
<div style="overflow:hidden;width:360px;height:225px;position:absolute;top:30px;" id="div"> 
<div style="width: 360px; height: 900px; position: relative;" id="imgCon"> 
<img src="img/1.jpg" id="img0"/> 
<img src="img/2.jpg" id="img1"/> 
<img src="img/3.jpg" id="img2"/> 
<img src="img/1a.jpg" id="img3"/> 
<img src="img/1.jpg"/> 
</div> 
</div> 
<div class="box" num="0" id="box0" style="color:red;">1</div> 
<div class="box" num="1" id="box1">2</div> 
<div class="box" num="2" id="box2">3</div> 
<div class="box" num="3" id="box3">4</div> 
</body>

JS代码:
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box0").click(function(){ 
//$("#imgCon").slideUp(4200); 
$("#imgCon").animate({top:'-225px'},"slow"); 
}); 
$("#box1").click(function(){ 
$("#imgCon").animate({top:'-450px'},"slow"); 
}); 
$("#box2").click(function(){ 
$("#imgCon").animate({top:'-675px'},"slow"); 
}); 
$("#box3").click(function(){ 
$("#imgCon").animate({top:'-900px'},"slow"); 
}); 
}); 
</script>

CSS:代码:
<style type="text/css"> 
.box{ 
width:40px; 
height:20px; 
border:1px solid #000; 
float:left; 
cursor:pointer; 
} 
#imgCon img{ 
display:block; 
padding:0; 
margin:0; 
width:360px; 
height:225px; 
} 
</style>
Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
Vue响应式原理详解
Apr 18 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
Dec 20 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
JS中多层次排序算法的实现代码
Jan 06 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 #Javascript
利用jq让你的div居中的好方法分享
Nov 21 #Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 #Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 #Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
You might like
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Javascript的一种模块模式
2008/03/22 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python读写json文件的简单实现
2017/04/11 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
通过实例了解python property属性
2019/11/01 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
协议书格式
2014/04/23 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
暑期社会实践证明书
2014/11/17 职场文书
python process模块的使用简介
2021/05/14 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技