DOTA轮播

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

这一节介绍一下Dota轮播，先看看最终效果图。

一、HTML代码分析：

<body>

	<div class="dota">

		<ul id="content">

			<li><a href="#"><img src="data:images/1.jpg"/></a></li>

			<li><a href="#"><img src="data:images/2.jpg"/></a></li>

			<li><a href="#"><img src="data:images/3.jpg"/></a></li>

			<li><a href="#"><img src="data:images/4.jpg"/></a></li>

			<li><a href="#"><img src="data:images/5.jpg"/></a></li>

		</ul>

		<ul id="indicator">

			<li class="current"><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>

			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>

			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>

			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>

			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>

		</ul>

	</div>

</body>

此效果的层次结构比较清楚：

1. class为data的div是最外层的容器，可以用来控制整个效果图显示的位置。

2. id为content的ul用来存放左侧滚动的图片。

3. id为indicator的ul用来显示右侧的指示栏。

二、CSS代码：

*{margin: 0; padding: 0;}

		img{

			border:0;

		}

		.dota{

			width:570px;

			height: 230px;

			margin:100px auto;

			position: relative;

			overflow: hidden;

		}

		.dota #content{

			float: left;

			list-style: none;

			position: absolute;

			width:380px;

			height:230px;

		}

		.dota #content img{

			width:380px;

			height:230px;

		}

		.dota #indicator{

			float: right;

			list-style: none;

			width:180px;

			height:220px;

			padding: 5px;

			background-color: #100F13;

		}

		.dota #indicator li{

			width: 180px;

			height: 44px;

			background: url(images/anniu.png) 0 -44px;

		}

		.dota #indicator li.current{

			background-position: 0 0;

		}

		.dota #indicator li a{

			display: block;

			width: 160px;

			height: 34px;

			padding: 5px 0 5px 25px;

		}

		.dota #indicator li a:link , .dota #indicator li a:visited{

			text-decoration: none;

			color: #686477;

			font: 12px/145% "宋体";

		}

这里，我对indicator中li的代码进行说明：

.dota #indicator li中的css代码就是设置右侧指示栏中的每一项，注意到，这里使用了background属性，也就是说li的背景是一张图片。准备好的图片如下：

这张准备好的图片大小为 180 * 88，而.dota #indicator li中的background属性设置的position属性大小为 0 -44px, 即截取的图片的下半部分；所以indicator中所有的背景图片显示的是下半部分比较暗的部分；而.dota #indicator li.current 的position属性大小为 0 0，所以默认情况下indicator的第一个显示高亮，其余的显示为暗黑的那部分。然后通过JQuery代码控制current属性作用在 "谁" 身上来切换选中状态。

三、JQuery代码:

<script type="text/javascript">

		$(function(){

			var nowImage = 0;

			/* 为定时动画服务 */

			$(".dota #content li").first().clone().appendTo($(".dota #content"));

			var timer = setInterval(autoAnimate, 1500);

			$(".dota").mouseenter(function(){

				clearInterval(timer);

			}).mouseleave(function(){

				timer = setInterval(autoAnimate, 1500);

			});;

			$(".dota #indicator li").mouseenter(function(){

				$(this).addClass("current").siblings().removeClass("current");

				nowImage = $(this).index();

				/*stop()  可以立刻清楚以前的动画，防止动画叠加*/

				$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);

			});

			function autoAnimate(){

				if(nowImage == 4){

					nowImage = 0;

					$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");

					$(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){

						$(".dota #content").css("top",0);

					});

				}

				else{

					nowImage++;

					$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);

					$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");

					}

			}

		});

	</script>

由于这里的JQuery代码与前面几节介绍的无缝连续滚动很类似，所以这里我就不做说明了，如果感兴趣的话，请查看JS & JQuery 其他的轮播效果。

DOTA轮播的更多相关文章

踩石行动：ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性制作图片轮播动画自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播运用 ...
纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始两个区域: ...
js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首 ...
JS案例之2——cycle元素轮播
元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...
BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)
这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...
原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

【xlwings1】多线程写入excel数据
#!/ufr/bin/env python # -*- coding:utf-8 -*- import xlwings as xw import queue import threading impo ...
通过游戏学python 3.6 第一季第六章实例项目猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改可复制直接使用娱乐可封装函数
#猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改 #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优 ...
常用web字体的使用指南
而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体.在可选性很差的前提之下,如何正确的使用中文字体呢? 首先,以下的字体声 ...
C#里的应用程序域AppDomain
首先,描述一下AppDomain是什么:当一个程序集被执行时,系统就会自动为其创建一个AppDomain,每一个AppDomain属于某个进程,一个进程内可以有多个AppDomain:每个AppDom ...
CentOS 7安装与配置Tomcat8
1.下载安装包并上传服务器 2.解压 tar -zxvf apache-tomcat-8.5.16.tar.gz -C /opt/java 3.启动 cd /opt/java/apache-tomca ...
Zookeeper安装过程
zookeeper的安装我反反复复安装了三次,前两次在root用户下安装都失败了,都启动不起来,第三次我改成普通用户安装,没想到成功了,很不可思议,步骤完全一样,接下来介绍一下具体的安装步骤: 1. ...
Javascript-选择器集合调用方法
<script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...
gcd(辗转相除法)
证明过程: 假设用f(x, y)表示x,y的最大公约数,取k = x/y,b = x%y,则x = ky + b,如果一个数能够同时整除x和y,则必能同时整除b和y:而能够同时整除b和y的数也必能同时 ...
farv
http://weishu.me/ https://github.com/jimupon/VirtualXposed O: ? api 26 - vdex N: speed-profile M: ...
php去除文件bom头
有时候在ajax返回的json数据前多出一些不明的字符,就是所谓的bom头,导致javascript解析json格式失败,下面贴出一段PHP代码实现检测和去除bom头. <?php header ...

DOTA轮播

DOTA轮播的更多相关文章

随机推荐

热门专题