点击上下页，实现图片滚动的jquery代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<style type="text/css">
*{ margin:0px; padding:0px; list-style-type:none}
.main{ width:980px; height:auto;margin:auto; position:absolute}
.m_caption{ width:980px; height:50px; background:#09F}
.mc1{ width:200px; float:left;}
.mc1 span{ display:inline-block; width:30px; height:10px; background:#9C9; margin-right:10px;}
.mc1 span.current{ display:inline-block; width:30px; height:10px; margin-right:10px;background:red}
.mc2{ width:300px; float:left}
.mc2 span{display:inline-block; width:70px; margin-right:20px;}
.m_contain{ margin-top:30px; width:450px; position:absolute;}
.m_contain_list{ width:450px; height:130px; position:relative;overflow:hidden; border:1px red solid; margin:auto; padding:20px 0 20px 0;}
.m_contain_list ul{ width:1320px; margin:auto; height:130px; position:relative}
.m_contain_list ul li{ float:left; width:200px; height:130px; margin-left:20px}
</style>
<script type="text/javascript">
$(function(){
var page=1;
var i=2;
$("span.next").click(function(){
var $main=$(".main");
var $m_contain=$main.find("div.m_contain");
var $m_contain_list=$m_contain.find("div.m_contain_list ul");
var width=$m_contain.width();
var len=$m_contain_list.find("li").length;
//向上取整 3
var page_count=Math.ceil(len/i);
if(!$m_contain_list.is(":animated")){
if(page == page_count){//说明已经到了最后一页了
$m_contain_list.animate({left:"0px"},1000);
page=1;
}
else{
$m_contain_list.animate({left:"-="+width},1000);
page ++;
}
}
$main.find(".mc1 span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
$("span.pre").click(function(){
var $main=$(".main");
var $m_contain=$main.find("div.m_contain");
var $m_contain_list=$m_contain.find("div.m_contain_list ul");
var width=$m_contain.width();
var len=$m_contain_list.find("li").length;
//向上取整 3
var page_count=Math.ceil(len/i);
if(!$m_contain_list.is(":animated")){
if(page == 1){//说明已经是第一页了
$m_contain_list.animate({left:"-="+width*(page_count-1)},1000);
page=page_count;
}
else{
$m_contain_list.animate({left:"+="+width},1000);
page --;
}
}
$main.find(".mc1 span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
</script>
<body>
<div class="main">
<div class="m_caption">
<p class="mc1">
<span class="current"></span><span></span><span></span>
</p>
<p class="mc2">
<span class="pre">上一页</span><span class="next">下一页</span>
</p>
</div>
<div class="m_contain">
<div class="m_contain_list">
<ul>
<li><img src="data:images/class1.jpg" width="200" height="130"/></li>
<li><img src="data:images/class2.jpg" width="200" height="130"/></li>
<li><img src="data:images/class3.jpg" width="200" height="130"/></li>
<li><img src="data:images/class4.jpg" width="200" height="130"/></li>
<li><img src="data:images/class5.jpg" width="200" height="130"/></li>
<li><img src="data:images/class6.jpg" width="200" height="130"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>
点击上下页，实现图片滚动的jquery代码的更多相关文章
- 图片滚动插件jquery bxslider
https://www.cnblogs.com/axl234/p/4167196.html
- 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】
源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...
- viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
- Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- 求帮忙解决封装jquery图片滚动问题
今天用jquery封装了点击图片滚动,但是发现在屏幕自适应时,图片停在的位置会随着屏幕大小而错位(我引入了pocketgrid.css响应式文件,但没办法去那边修改onsize事件...),求大神.. ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
随机推荐
- 一个SQL 建表格式
CREATE TABLE [dbo].[SysSample]([Id] [varchar](50) NOT NULL,[Name] [varchar](50) NULL,[Age] [int] NUL ...
- mvc 客户端验证
@model MvcApplication1.Models.ViewClass @{ ViewBag.Title = "View2"; } @******引用这两个js实现客户端的 ...
- UIViewController控制器的生命周期
视图控制器就是用来管理iOS程序中的视图,默认一个UIViewController为我们提供了一个视图UIView 我们称为根视图 - (instancetype)init{ if (self = ...
- 今天进行了一次IOS面试，分享一下面试结果
IOS开发工程师岗位职责:1.负责移动产品IOS版客户端软件开发:2.可根据需求独立完成客户端软件的设计和开发;3.日常工作包括手机软件系统开发.单元测试.维护以及文档编写:不定期的公司内部培训.任职 ...
- F - The Circumference of the Circle
Description To calculate the circumference of a circle seems to be an easy task - provided you know ...
- Unicode-字符编码的历史由来(转)
http://www.nowamagic.net/internet/internet_CharsetHistory.php 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以 ...
- Control character in cookie value, consider BASE64 encoding your value-Cookie保存中文出错[转]
项目当中用到cookie保存中文,但是会报如下错误: Control character in cookie value, consider BASE64 encoding your value 大概 ...
- eclipse优化配置
-startup plugins/org.eclipse.equinox.launcher_1..jar --launcher.library plugins/org.eclipse.equinox. ...
- Python成长之路第二篇（2）_列表元组内置函数用法
列表元组内置函数用法list 元组的用法和列表相似就不一一介绍了 1)def append(self, p_object):将值添加到列表的最后 # real signature unknown; r ...
- （八）boost库之异常处理
(八)boost库之异常处理 当你面对上千万行的项目时,当看到系统输出了异常信息时,你是否想过,如果它能将文件名.行号等信息输出,该多好啊,曾经为此绞尽脑汁. 今天使用boost库,将轻松的解决这个问 ...