<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/my8.js"></script>
<link rel="stylesheet" href="css/glob.css" type="text/css"></link>
</head>
<body>
<div class="view_show">
<img alt="" src="images/bimg1.jpg">
</div>
<div class="v_show2">
<div class="v_caption">
<h2 class="cartoon" title="myphoto">我的相册</h2>
<div class="highlight_tip">
<span id="1" class="current">●</span>
<span id="2">●</span>
<span id="3">●</span>
<span id="4">●</span>
</div>
<div class="change_btn">
<span id="0" class="prev">上一页</span>
<span id="1" class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="images/bimg1.jpg" alt="照片" /></a>
<h4><a href="#">照片1</a></h4>
<span>上传:<i>2012-10-07</i></span>
</li>
更多li </ul>
</div>
</div>
</div>
</body>
</html>
*{margin: 0px;padding: 0px;}
.v_show{
width: 475px;
margin:0px auto;
margin-top:20px;
border: 1px solid #ccc;
}
span{
color: blue;
}
.current{
color: yellow;
}
.highlight_tip span,.prev,.next{
cursor: pointer;
margin-left: 10px;
}
.v_caption{
width: 475px;
background-color: #ccc;
line-height: 30px;
}
.v_caption h2{
margin-left: 8px;
color: green;
}
.cartoon,.highlight_tip,.change_btn{
float: left;
}
.v_show em{
float: right;
}
.v_show2 em{
float: right;
}
.v_content{
width: 475px;
overflow:hidden;
position: relative;
}
.v_content_list{
margin-top:10px;
height: 120px;
position: relative;
}
.v_content_list ul li{
float: left;
width:100px;
margin-left:15px;
list-style: none;
line-height:20px;
font-size: 12px;
text-align: center;
overflow: hidden;
}
.v_content_list ul li a img{
border:0;
height: 80px;
}
.v_content_list ul li h4 a{
border:0;
text-decoration: none;
line-height:20px;
font-size: 12px;
}
.v_content_list ul li span i{
font-size: 12px;
color: blue;
}
/*相册*/
.view_show{
width:475px;
margin: 0px auto;
text-align: center;
}
.view_show img{
height: 355px;
}
.v_show2{
width: 475px;
margin:0px auto;
border: 1px solid #ccc;
}
$(function(){
//计算图片层的总宽度
var $list_width = ($(".v_content_list ul li").length)*$(".v_content").width();
//设置图片层的总宽度
$(".v_content_list").css({
"width":$list_width
});
var page = 1;//页码
var i = 4; //每页显示四张图片
var $parent = $(".v_show2");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");
var v_width=$v_content.width()-15; //
var len = $v_show.find("li").length;//多少张图片
var page_count = Math.ceil(len/i); //获取总页数
//翻页
function fanye(type){
if(!$v_show.is(":animated")){
if($(this).attr("id")==1 || type==-1){
//当动画达到最后一版
if(page == page_count){
$v_show.animate({left:'0px'},1000);
page = 1;
}else{
$v_show.animate({left:'-='+v_width+"px"},1000);
page++;
}
}else{
if(page == 1){
$v_show.animate({left:'-='+v_width*(page_count-1)+"px"},1000);
page = page_count;
}else{
$v_show.animate({left:'+='+v_width+"px"},1000);
page--;
}
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
//上一页
$("span.prev").click(fanye);
//下一页
$("span.next").click(fanye);
//单击缩略图显示大图
$(".v_content_list ul li img").click(function(){
var src = this.src;
$(".view_show").fadeOut(500,function(){
$(".view_show img").attr("src",src);
});
$(".view_show").fadeIn(500);
return false;
});
//鼠标滚轮事件 d:-1下滚; 1:上滚
$(".v_show2").mousewheel(function(e,d){
fanye(d);
});
});
分享到:
相关推荐
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
jquery1.7 开发工具 帮助文档 jQueryAPI-100214.chm jquery-1.7.js jquery-1.7.min.js
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册jQuery1.7 中文手册
jquery1.7中文参考手册 jquery1.7_20111120 jquery1.7_20111204 jquery1.7_20120209
jQuery1.7压缩和未压缩版
资源名称:jquery1.7 中文文档 jquery开发用的着
jquery1.7+jquery1.7中文API.Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库
jquery1.7_20111204.rar
JQuery 1.7 1.7.1 API 中文 中文API jQueryAPI
jQuery1.7_20120209 中文 API 文档 chm格式
jquery 1.7 中文.chm
jquery1.7参考手册,chm版,方便查找各个功能使用方法。
jquery 1.7 中文 api 修正版
jQuery 1.7 API 中文文档,查询接口函数
jQuery1.7 中文离线手册,资源真实的,自己也是花了许多精力弄到,前端的小伙伴想看jquery API的话,离线手册不可少,都不容易,已经调整了下下载积分
Jquery 1.7 api文档
jquery1.7+jquery1.8 API文档CHM格式 包含1.7和1.8两个版本
jquery1.7版api中文手册,可带在线更新