<!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);
});
});
分享到：
相关推荐
《jQuery 1.7.2 手册：深入解析与应用》 jQuery 是一个轻量级的JavaScript库，因其简洁的API和强大的功能而深受开发者喜爱。本手册聚焦于jQuery 1.7.2版本，这是一个稳定且广泛使用的版本，为开发者提供了丰富的...
jquery-1.7.2.js和jquery-1.7.2中文API。
本教程将详细讲解如何使用jQuery库来实现表格的动态分页，同时结合Java后端进行数据的动态查询和分页处理。 首先，让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时，仅加载当前显示的数据，...
jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间相册梦幻效果.rar jQuery空间...
在JavaScript和jQuery的世界里，"js jquery实现table假分页"是一个常见的需求，尤其是在处理大量数据展示时。分页能够帮助优化用户体验，避免一次性加载过多数据导致页面响应变慢。假分页，又称为模拟分页，是通过...
jquery 1.72类库 jquery 最新类库
本项目"jquery相册左右按钮+滚动"是基于jQuery实现的一个图片相册功能，它结合了左右箭头按钮以及平滑的滚动效果，为用户提供了一种直观且美观的图片浏览体验。 1. **jQuery基本概念**： - jQuery是由John Resig...
"Jquery相册图片滚动"是利用jQuery实现的一种常见功能，常用于展示一系列图片，并通过用户交互（如点击）来实现图片的动态切换，提供良好的用户体验。 首先，我们要理解jQuery的基本概念。jQuery是由John Resig创建...
本资源"jquery列表分页样式支持手机端分页滚动效果代码"聚焦于如何利用jQuery实现一种适应手机端的列表分页效果，特别是在用户滚动页面时能流畅地加载更多内容。 首先，我们要理解分页在网页设计中的重要性。在数据...
本插件专注于实现一种分页图片向下滚动切换的效果，这种效果常见于许多网站的相册展示或者产品展示区域，为用户提供流畅的浏览体验。 首先，我们要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，它的...
**jQueryPager：基于JQuery的Ajax分页插件Pagination实现** 在Web开发中，当数据量庞大时，分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现...
"JqueryGrid 无刷新分页"指的是利用jQueryGrid实现的页面内容不更新的情况下进行数据分页的技术。这种方法可以提高用户体验，因为用户在浏览大量数据时无需等待整个页面重新加载，只需点击分页按钮即可获取新的数据...
带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的全屏jQuery相册代码.rar 带滚动缩略图的...
**jQuery和jQuery UI API详解** jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。版本1.7.2是jQuery的一个稳定版本，提供了丰富的功能和性能优化。在这个名为"jQuery...
《jQuery 1.7.2：深入解析与应用》 jQuery，这个JavaScript库，自2006年发布以来，以其简洁的API和强大的功能，迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.7.2这一经典版本，包括它的主要...
`jquery手机端列表分页样式.zip`提供的代码资源，正是针对这种需求，它是一个基于jQuery库开发的移动端列表分页解决方案，能够实现美观且高效的分页滚动效果。 首先，jQuery是一个广泛使用的JavaScript库，它简化了...
本教程将详细讲解如何使用jQuery和Node.js来实现一个滚动分页插件。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在滚动分页中，jQuery可以监听用户的滚动事件，当用户接近页面...
在IT行业中，jQuery分页是一种常见的网页数据展示技术，它能有效地管理大量数据，提高用户体验。本项目名为“自己写的jQuery分页根据json分页”，表明这是一个使用jQuery库实现的自定义分页功能，该功能依赖于JSON...
在本项目中，"jquery动态表格自定义分页.zip"是一个包含使用jQuery和CSS实现动态表格分页功能的示例。下面将详细讲解这个项目的关键知识点： 1. jQuery：jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历...
分页，并使用jquery ajax传数据。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...