锋利的jQuery幻灯片实例
//锋利的jQuery幻灯片实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} body {
font-size: 12px;
} .v_show {
width: 592px;
margin: 20px 0px 0 30px;
border: 1px solid #ccc;
} .v_caption {
width: 592px;
height: 40px;
line-height: 40px;
overflow: hidden;
background: url("images/btn_cartoon.gif") repeat-x;
} .cartoon {
float: left;
width: 85px;
margin-right: 10px;
background: url("images/btn_cartoon.gif") 0px -100px no-repeat;
text-indent: -9999px;
} .highlight_tip {
float: left;
padding-top: 16px;
margin-right: 10px
} .highlight_tip span.current {
background: url("images/btn_cartoon.gif") 0px -220px;
} .highlight_tip span {
display: inline;
float: left;
width: 7px;
height: 7px;
overflow: hidden;
margin: 0 2px;
background: url(images/btn_cartoon.gif) no-repeat 0 -320px;
text-indent: -9999px;
} .change_btn {
float: left;
overflow: hidden;
width: 65px;
padding-top: 8px;
} .change_btn span.prev {
display: block;
float: left;
width: 30px;
height: 23px;
background: url("images/btn_cartoon.gif") 0px -400px no-repeat;
text-indent: -9999px;
} .change_btn span.next {
display: block;
float: left;
width: 30px;
height: 23px;
background: url("images/btn_cartoon.gif") -30px -400px no-repeat;
text-indent: -9999px;
} .v_caption em {
float: right;
padding-right: 10px; } .v_caption em a {
font-size: 12px;
text-decoration: none;
color: #2B93D2;
} .v_content {
position: relative;
height: 160px;
overflow: hidden;
} .v_content_list {
height: 160px;
width: 2500px;
position: absolute;
left: 0;
top: 0;
} .v_content_list ul {
list-style: none;
} .v_content_list li {
float: left;
margin: 10px 5px 0;
padding: 5px;
} .v_content_list li a {
display: block;
width: 128px;
height: 80px;
overflow: hidden;
} .v_content_list h4 {
margin-top: 10px;
color: #2B93D2;
}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function () {
var page = 1;//初始版面为1
var i = 4;//每个版面放四张图片
$(".next").click(function () {
var $parent = $(this).parents(".v_show");
var $contentlist = $parent.find(".v_content_list");
var $content = $parent.find(".v_content");//left位置要变换的盒子
var v_width = $content.width();//获取到盒子的宽度
var len = $contentlist.find("li").length;//获取到li的个数
var pagecount = Math.ceil(len / i);//最多能够放四张版面
if(!$contentlist.is(":animated")){
if(page==pagecount){//若是第四个版面
$contentlist.animate({left: '0px'}, "slow")//改变left位置，返回为第一个版面
page=1;
}else{
$contentlist.animate({left: '-=' + v_width}, "slow")//v_width向左减宽度
page++;
}
}
$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current");
})
$(".prev").click(function () {
var $parent = $(this).parents(".v_show");
var $contentlist = $parent.find(".v_content_list");
var $content = $parent.find(".v_content");
var v_width = $content.width();
var len = $contentlist.find("li").length;
var pagecount = Math.ceil(len / i);
if(!$contentlist.is(":animated")){
if(page==1){
$contentlist.animate({left: '-='+v_width*(pagecount-1)}, "slow");//改变为第四个版面
page=4;
}else{
$contentlist.animate({left: '+=' + v_width}, "slow")
page--;
}
}
$(".highlight_tip span").eq((page-1)).addClass("current").siblings().removeClass("current")
})
})
</script>
<script></script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" alt="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">0</span><span>1</span><span>2</span><span>3</span>
</div>
<div class="change_btn">
<span class="prev">上一个</span><span 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="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/01.jpg" alt=""></a><h4>海贼王</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/02.jpg" alt=""></a><h4>哆啦A梦</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/03.jpg" alt=""></a><h4>火影忍者</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
<li><a href="#"><img src="data:images/04.jpg" alt=""></a><h4>不晓得的</h4><span>播放：<em>21456</em></span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
锋利的jQuery幻灯片实例的更多相关文章
- 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器
<锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...
- lightslider-支持移动触摸的轻量级jQuery幻灯片插件
插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 锋利的jQuery学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结.此书主要讲解了jQuery的常用操作,包括认识jQuery,jQ ...
- SlidesJS - 老牌的响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...
- Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
随机推荐
- (转)关于java.lang.UnsupportedClassVersionError解决方法总结
背景:在服务器部署程序是后总是怀疑jdk安装不正确,所以打算运行一个小程序进行测试. 通过这样一个方法 ,可以测试jdk是否正确安装. 1 问题描述 首先编写了个Hello.java的代码: 这里我本 ...
- Java设计模式之适配器模式(项目升级案例)
今天是我学习Java设计模式中的第三个设计模式了,但是天气又开始变得狂热起来,对于我这个凉爽惯了的青藏人来说,又是非常闹心的一件事儿,好了不管怎么样,目标还是目标(争取把23种Java设计模式接触一遍 ...
- .NET Core 成都线下面基会拉开序幕
2017年07月29日下午,由 .NET China Foundation 成都小组组织的 .NET Core 成都地区线下技术交流会在成都成华区某茶楼成功举行,这也是成都地区 .NET Core 非 ...
- jsp元素
1.指令元素:用于在JSP转换为Servlet阶段提供JSP页面的相关信息,如页面采用的字符编码集.页面中需要导入的类等信息,指令元素不会产生任何的输出到当前JSP的输出流中 指令元素有三种指令:pa ...
- android调用系统相机进行视频录制并保存到指定目录
最近在做视频录制上传,调用的是系统的相机. 在做之前查了一些资料,发现好多人遇到保存到指定目录不成功的现象.自己写的时候就注意这些,最后发现他们遇到的问题我这边根本没有.可能是他们写法有问题吧. 下边 ...
- 一步一步深入理解Dijkstra算法
先简单介绍一下最短路径: 最短路径是啥?就是一个带边值的图中从某一个顶点到另外一个顶点的最短路径. 官方定义:对于内网图而言,最短路径是指两顶点之间经过的边上权值之和最小的路径. 并且我们称路径上的第 ...
- 用Eclipse生成JPA元模型
在JPA criteria 动态查询中,有个"元模型"的东西,它是根据"实体"类动态生成的一个类,它的主要作用是实现JPA criteria查询的"类 ...
- 删除物品[JLOI2013]
题目描述 箱子再分配问题需要解决如下问题: (1)一共有N个物品,堆成M堆. (2)所有物品都是一样的,但是它们有不同的优先级. (3)你只能够移动某堆中位于顶端的物品. (4)你可以把任意一 ...
- 再起航，我的学习笔记之JavaScript设计模式05(简单工程模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...