原文: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. 如约而至(walk)

    LCA大佬的做法: 考虑暴力的高斯消元,我们优化它. $\sum\limits_{j} gcd(i,j)^{c-d} i^d j^d x_j=b_i$ $\sum\limits_{j} gcd(i,j ...

  2. clientHeight、offsetHeight 区别 笔记

    一张图 说明全部 clientHeight和clientWidth用于描述元素内尺寸,是指元素内容+内边距大小,不包括边框(低版本IE下实际包括).外边距.滚动条部分 offsetHeight和off ...

  3. H5C3--线性渐变 linear-gradient，径向渐变radial-gradient，重复渐变radial-gradient

    一.线性渐变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. JavaScript 实现回文解码

    题目也是源自今日头条前端工程师笔试题.题目描述: 现在有一个字符串,你要对这个字符串进行 n 次操作,每次操作给出两个数字:(p, l) 表示当前字符串中从下标为 p 的字符开始的长度为 l 的一个子 ...

  5. Mocha测试

    mocha中文名叫做摩卡,是javascript测试的一种常见手段. 其他的类似的测试还有jasmine.karma.tape等. 1. 测试脚本怎么写 // add.js function add( ...

  6. SpringBoot-(10)配置虚拟路径-指定外部路径文件夹存取文件

    参考:https://blog.csdn.net/feng2147685/article/details/95623135 package com.online.director; import or ...

  7. 锋利的JQuery学习之JQuery中的事件

    一.加载DOM 在页面加载完毕之后,浏览器会通过javascript为dom元素添加事件,在常规的javascript中使用window.onload方法,而在jQuery中使用的是$(documen ...

  8. mysql查询某个字段重复的数据

    查询某个字段重复的数据 ; 查询股票重复的营业厅 ;

  9. python实例 条件和循环语句

    #! /usr/bin/python #条件和循环语句 x=int(input("Please enter an integer:")) if x<0:     x=0    ...

  10. 【python之路19】文件操作

    一.打开文件 文件句柄 = open('文件路径', '模式') 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 打开文件的模式有: r ...