jq小demo—图片翻页展示效果 animate()动画

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

</head>

<style type="text/css">

html,h2,h4,ul,li{margin:0;padding:0;}

ul,li{list-style:none;}

.v_show{

	border:1px solid #aaa;

	margin:0 auto;

	width:520px;

}

.v_caption{

	height:30px;

	line-height:30px;

	border-bottom:1px solid #dfdfdf;

	overflow:hidden;

	position:relative;

}

.v_caption h2{

	float:left;

	font-size:16px;

}

.v_caption em{

	position:absolute;

	right:0;

	top:0;

}

.highlight_tip{

	float:left;

}

.highlight_tip span{

	background:#ddd;

	display:inline-block;

	width:8px;

	height:8px;

	margin-right:2px;

	border-radius:4px;

	text-indent:-99px;

	overflow:hidden;

	cursor:pointer;

}

.highlight_tip .current{

	background:#fc0;

}

.change_btn span{

	cursor:pointer;

}

.v_content{

	height:210px;width:100%;

	overflow:hidden;

}

.v_content_list{

	position:relative;  //关键，否则js的left属性会无效

}

.v_content_list ul{

    display:flex;

    width: 100%;

}

.v_content_list li{

    flex:initial;  //元素要在一行显示

    min-width:120px;

	margin:10px 10px 10px 0;

}

.v_content_list img{

	width:120px;

	height:150px;

}

</style>

<body>

<div class="v_show">

	<div class="v_caption">

		<h2>卡通动漫</h2>

		<div class="highlight_tip">

			<span class="current">1</span><span>2</span><span>3</span><span>4</span>

		</div>

		<div class="change_btn">

			<span class="prev">上一页</span>

			<span class="next">下一页</span>

		</div>

		<em>更多视频 >> </em>

	</div>

	<div class="v_content">

		<div class="v_content_list">

			<ul>

			<li>

				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />

				<h4>二次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />

				<h4>二次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />

				<h4>二次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />

				<h4>二次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />

				<h4>二次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

			<li>

				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />

				<h4>四次元播放</h4>

				<span>播放:<em>7777</em></span>

			</li>

		</ul>

		</div>

	</div>

</div>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

	var page=1;

	var i=4;

	$("span.next").click(function(){

		$this=$(this);

		var $parent=$this.parents("div.v_show");

		var $v_show=$parent.find("div.v_content_list"); //视频展示区域

		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div

		var v_width= $v_content.width();

		var len=$v_show.find("li").length;

		var page_count=Math.ceil(len/i);  //向上取整

		if(!$v_show.is(":animated")){ //是否处于动画状态

			//是否已经是最后一个版面，是直接跳到第一版

			if(page==page_count){

				$v_show.animate({left:'0px'},"slow");

				page=1;

			}else{

				$v_show.animate({left:'-='+v_width},"slow");

				page++;

			}

			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

		}

	});

	$("span.prev").click(function(){

		$this=$(this);

		var $parent=$this.parents("div.v_show");

		var $v_show=$parent.find("div.v_content_list"); //视频展示区域

		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div

		var v_width= $v_content.width();

		var len=$v_show.find("li").length;

		var page_count=Math.ceil(len/i);  //向上取整

		if(!$v_show.is(":animated")){ //是否处于动画状态

			if(page==1){

				$v_show.animate({left:'-='+v_width*(page_count-1)},"slow");

				page=page_count;

			}else{

				$v_show.animate({left:'+='+v_width},"slow");

				page--;

			}

			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

		}

	});

})

</script>

</body>

</html>

jq小demo—图片翻页展示效果 animate()动画的更多相关文章

jq demo—图片翻页展示效果 animate()动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
3D版翻页公告效果
代码地址如下:http://www.demodashi.com/demo/12830.html 前言: 在逛小程序蘑菇街的时候,看到一个2D版滚动的翻页公告效果.其实看到这个效果的时候,一点都不觉得稀 ...
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...
创意HTML5文字特效类似翻页的效果
原文:创意HTML5文字特效类似翻页的效果之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...
jquery 实现智能炫酷的翻页相册效果
jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离1. [代码]jquery ...
Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录
经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...
一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览源码下载实现的代码. html代码: <div id= ...
微信小程序实现标签页滑块效果
微信小程序实现标签页滑块效果小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...
CSS3——制作图片翻页的小动画
觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...

随机推荐

Hamilton
import java.util.Vector; class Hamilton { int start; int a[][]; int len; int x[]; // 记录回路 boolean fl ...
记那一次C++开发电话面试
题目一: linux进程间通信(IPC)有几种方式,下面将将简单的简述一下: 一.管道(pipe) 管道是Linux支持的最初IPC方式,管道可分为无名管道,有名管道等. (一)无名管道,它具有几个特 ...
如何Windows系统中搭建php环境
PHP介绍: PHP 独特的语法混合了C.Java.Perl以及PHP自创的语法.它可以比CGI或者Perl更快速地执行动态网页.用PHP做出的动态页面与其他的编程语言相比,PHP是将程序嵌入到HTM ...
[置顶] ROS探索总结（十一）——机器视觉
机器视觉在计算机时代已经越来越流行,摄像头价格越来越低廉,部分集成深度传感器的混合型传感器也逐渐在研究领域普及,例如微软推出的Kinect,而且与之配套的软件功能十分强大,为开发带来了极大的便利.RO ...
Android本地化资源目录详解
我们可以设想,有两个不同分辨率的手机(320*480和480*800)要使用一些图像资源,为了使图像不失真,就需要为不同分辨率的手机指定不同的图像,为此就需要建立不同的资源目录. 在res目录中建立了 ...
最新samba.tar.gz安装方法
看了韩顺平老师的samba.rpm包安装后,想自己也动手试试,便在samba官网找啊找,只找到一个tar.gz包,于是开始了这一段漫长的跨时两天的安装旅途... 1.首先,看看系统是否已经安装了sam ...
使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
saltstack布署实践【配置文件管理-state模块】
那如果要批量修改被管机器的某个配置文件怎么做?以下给出一个最简单案例. 先在主管机器master上查看/etc/salt/master配置文件看到有以下几行配置文件 # file_roots ...
InnoDB的Named File Formats
随着InnoDB存储引擎的发展,新的页数据结构有时用来支持新的功能特性.比如前面提到的InnoDB Plugin,提供了新的页数据结构来支持表压缩功能,完全溢出的(Off page)大变长字符类型字段 ...
hdu 1890 Robotic Sort(splay 区间反转+删点)
题目链接:hdu 1890 Robotic Sort 题意: 给你n个数,每次找到第i小的数的位置,然后输出这个位置,然后将这个位置前面的数翻转一下,然后删除这个数,这样执行n次. 题解: 典型的sp ...

jq小demo—图片翻页展示效果 animate()动画

jq小demo—图片翻页展示效果 animate()动画的更多相关文章

随机推荐

热门专题