<!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="卡通">我的相册</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);
});
});
