原文: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. 阿里云应用高可用服务 AHAS 流控降级实现 SQL 自动防护功能

    在影响系统稳定性的各种因素中,慢 SQL 是相对比较致命的,可能会导致 CPU.LOAD 异常.系统资源耗尽.线上生产环境出现慢 SQL 往往有很多原因: 硬件问题.如网络速度慢,内存不足,I/O 吞 ...

  2. bzoj 1800 [Ahoi2009]fly 飞行棋——模拟

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1800 原来只想到一个弧是一条边. 然后发现不是.差点不会做.经Zinn提醒,不用枚举那条边由 ...

  3. Thinkphp 错误集锦

    1.无法加载控制器 开始还跑TP核心文件中找错误,结果没找到什么结果.最后还是用程序新建模块才发现问题. 问题是命名空间名字写错了.比如书:本来是Report模块下的IndexContrller,但是 ...

  4. 用javascript实现简单的用户登录验证

    用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 玩转gulp之压缩打包热重载

    上节上上节我们讲了gulp的sass编译和watch监听,动态加载 这样我们就可以做到,我管我写我的sass然后保存,自动编译,就好像我们在写css一样,这是一个自动化的一大步.我们呱唧呱唧. 我们已 ...

  6. JEECMS自定义标签开发步骤

    JEECMS自带的只有[@cms_advertising]标签,并且官方没有给文档,用法: [@cms_advertising id='3']             <img src=&quo ...

  7. The content of element type must match解决方法

    当我在mybatis的核心配置文件SqlMapConfig.xml中配置别名的时候,老是提示错误. 把鼠标移到上去就可以看到详细的内容 如下图所示: 问题原因: 通过错误的提示信息,原来这个xml文件 ...

  8. 2017年浙工大迎新赛热身赛 J Forever97与寄信 【数论/素数/Codeforces Round #382 (Div. 2) D. Taxes】

    时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 131072K,其他语言262144K64bit IO Format: %lld 题目描述 Forever97与未央是一对笔友,他们经常互 ...

  9. [Vue CLI 3] Uglify 相关的应用和设计

    在本文开始之前,先留一个问题? 如果在新版本我想加一个 drop_console 的配置呢? 在老版本的脚手架生成的配置中,对于线上环境的文件:webpack.prod.conf.js 使用了插件:u ...

  10. Swift 之数组与字典

    http://www.cocoachina.com/swift/20151230/14802.html 说到数组和字典,只要是编过程的小伙伴并不陌生.在Swift中的数组与字典也有着一些让人眼前一亮的 ...