原文: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. PHP--Button按钮没有设置type类型，默认会提交表单

    例如: <from > <input type='submit' value='提交'></input> <button >提交</button& ...

  2. php 该如何获取从百度搜索进入网站的关键词

    清源分享一个php获取从百度搜索进入网站的关键词的代码,有需要的朋友可以参考一下:https://blog.csdn.net/u012275531/article/details/17609065 代 ...

  3. Java中字符串为什么不以\0结尾

    Java中字符串为什么不以\0结尾 其实这个问题没有什么好说的,Java里面一切都是对象,是对象的话,字符串肯定就有长度,即然有长度,编译器就可以确定要输出的字符个数,当然也就没有必要去浪费那1字节的 ...

  4. CSS基础强化

    1. 浮动引起元素变成行内块元素-display:inline-block <div style="width: 400px;height: 200px;"> < ...

  5. list的基本使用

    转自:https://www.cnblogs.com/BeyondAnyTime/archive/2012/08/10/2631191.html vector :vector和built-in数组类似 ...

  6. 解决安装编译工具gcc后无法连接mysql

    在安装编译工具gcc后: yum -y install make gcc g++ gcc-c++ libtool autoconf automake imake mysql-devel libxml2 ...

  7. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  8. Ubuntu的网络共享

    实际场景 公司项目中遇到一个场景:Ubuntu的主机上装了个4G卡(USB模式),需要将这个4G网共享给一个AP,使得所有连接AP的移动设备都可以通过4G上外网 方法很简单: 1. 将4G网口之外的另 ...

  9. python内置模块大全 processon

    https://www.processon.com/view/link/5b4ee15be4b0edb750de96ac#map

  10. Vue. 之 npm安装Element

    Vue. 之 npm安装Element 前提: 相关运行环境以搭建完成,例如:Node.Npm等.    假如我的项目目录如下: D:\DISK WORKSPACE\VSCODE\CDS\cds-ap ...