原文: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轮播的更多相关文章

  1. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  6. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  7. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  8. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. 只要三步！阿里云DLA帮你处理海量JSON数据

    概述 您可能有大量应用程序产生的JSON数据,您可能需要对这些JSON数据进行整理,去除不想要的字段,或者只保留想要的字段,或者仅仅是进行数据查询. 那么,利用阿里云Data Lake Analyti ...

  2. geoserver与OpenLayers配置

          geoserver与OpenLayers配置         目录   1     准备工作.... 4 1.1      需要用到的程序和资料... 4 2     地图格式转换方式(一 ...

  3. python基础--迭代器、生成器、内置函数、面向对象编程

    迭代器:迭代器对象从集合的第一个元素开始访问,直到所有的元素都被访问完结束.迭代器只能往前不会后退 迭代:更新换代(重复)的过程,每次的迭代都必须基于上一次的结果 迭代器:迭代取值的工具 使用迭代器的 ...

  4. vue+vant ui+高德地图的选址组件

    首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...

  5. P1460 健康的荷斯坦奶牛 Healthy Holsteins

    P1460 健康的荷斯坦奶牛 Healthy Holsteins 题目描述 农民JOHN以拥有世界上最健康的奶牛为傲.他知道每种饲料中所包含的牛所需的最低的维他命量是多少.请你帮助农夫喂养他的牛,以保 ...

  6. MaxCompute Spark开发指南

    0. 概述 本文档面向需要使用MaxCompute Spark进行开发的用户使用.本指南主要适用于具备有Spark开发经验的开发人员. MaxCompute Spark是MaxCompute提供的兼容 ...

  7. 微信小程序--Tab栏切换的快速实现

    上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...

  8. LintCode_488 快乐数

    题目 写一个算法来判断一个数是不是"快乐数". 一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是无 ...

  9. 杨柳絮-Info：菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾”

    ylbtech-杨柳絮-Info:菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 1.返回顶部 1. 菏泽多措并举治理杨柳絮 5年内实现“有絮不成灾” 2019年04月09日 11:44  来源:大 ...

  10. 学习JDK1.8集合源码之--LinkedHashSet

    1. LinkedHashSet简介 LinkedHashSet继承自HashSet,故拥有HashSet的全部API,LinkedHashSet内部实现简单,核心参数和方法都继承自HashSet,只 ...