原文:DOTA轮播

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

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

一、HTML代码分析：

  1. <body>
  2. 	<div class="dota">
  3. 		<ul id="content">
  4. 			<li><a href="#"><img src="data:images/1.jpg"/></a></li>
  5. 			<li><a href="#"><img src="data:images/2.jpg"/></a></li>
  6. 			<li><a href="#"><img src="data:images/3.jpg"/></a></li>
  7. 			<li><a href="#"><img src="data:images/4.jpg"/></a></li>
  8. 			<li><a href="#"><img src="data:images/5.jpg"/></a></li>
  9. 		</ul>
  10. 		<ul id="indicator">
  11. 			<li class="current"><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>
  12. 			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>
  13. 			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>
  14. 			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>
  15. 			<li><a href="#">A版是一款手机DOTA应用，它涵盖了</a></li>
  16. 		</ul>
  17. 	</div>
  18. </body>

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

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

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

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

二、CSS代码：

  1. *{margin: 0; padding: 0;}
  3. 		img{
  4. 			border:0;
  5. 		}
  7. 		.dota{
  8. 			width:570px;
  9. 			height: 230px;
  10. 			margin:100px auto;
  11. 			position: relative;
  12. 			overflow: hidden;
  13. 		}
  15. 		.dota #content{
  16. 			float: left;
  17. 			list-style: none;
  18. 			position: absolute;
  19. 			width:380px;
  20. 			height:230px;
  21. 		}
  22. 		.dota #content img{
  23. 			width:380px;
  24. 			height:230px;
  25. 		}
  26. 		.dota #indicator{
  27. 			float: right;
  28. 			list-style: none;
  29. 			width:180px;
  30. 			height:220px;
  31. 			padding: 5px;
  32. 			background-color: #100F13;
  33. 		}
  34. 		.dota #indicator li{
  35. 			width: 180px;
  36. 			height: 44px;
  37. 			background: url(images/anniu.png) 0 -44px;
  38. 		}
  40. 		.dota #indicator li.current{
  41. 			background-position: 0 0;
  42. 		}
  44. 		.dota #indicator li a{
  45. 			display: block;
  46. 			width: 160px;
  47. 			height: 34px;
  48. 			padding: 5px 0 5px 25px;
  49. 		}
  51. 		.dota #indicator li a:link , .dota #indicator li a:visited{
  52. 			text-decoration: none;
  53. 			color: #686477;
  54. 			font: 12px/145% "宋体";
  55. 		}

这里，我对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代码:

  1. <script type="text/javascript">
  3. 		$(function(){
  5. 			var nowImage = 0;
  7. 			/* 为定时动画服务 */
  8. 			$(".dota #content li").first().clone().appendTo($(".dota #content"));
  10. 			var timer = setInterval(autoAnimate, 1500);
  12. 			$(".dota").mouseenter(function(){
  13. 				clearInterval(timer);
  14. 			}).mouseleave(function(){
  15. 				timer = setInterval(autoAnimate, 1500);
  16. 			});;
  18. 			$(".dota #indicator li").mouseenter(function(){
  19. 				$(this).addClass("current").siblings().removeClass("current");
  20. 				nowImage = $(this).index();
  21. 				/*stop()  可以立刻清楚以前的动画，防止动画叠加*/
  22. 				$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);
  23. 			});
  25. 			function autoAnimate(){
  26. 				if(nowImage == 4){
  27. 					nowImage = 0;
  29. 					$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
  30. 					$(".dota #content").stop().animate({"top":-230 * 5}, 1000,function(){
  31. 						$(".dota #content").css("top",0);
  32. 					});
  33. 				}
  34. 				else{
  35. 					nowImage++;
  36. 					$(".dota #content").stop().animate({"top": -230 * nowImage}, 1000);
  37. 					$(".dota #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
  38. 					}
  39. 			}
  41. 		});
  43. 	</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. 好用的Win10快捷键

    好用的Win10快捷键 Top 01 基础按键 Win+E: 打开"资源管理器". Win+R: 打开"运行"对话框. Win+L: 锁定当前用户. Win+D ...

  2. sass进阶

    代码的重用 基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用 现在开始继续学习:extend继承 .class1 { border: 1px solid #ddd; } .class ...

  3. 操作系统 Lab1

    练习1 1 ucore.img 是如何生成的 使用 make V= 查看详细的步骤 cc kern/init/init.c 使用cc工具进行预处理 gcc -Idir 将dir 作为查找目录(头文件) ...

  4. 2019.8.12 NOIP模拟测试18 反思总结

    写个博客总是符合要求的对吧 回来以后第一次悄悄参加考试,昨天全程围观… 然后喜提爆炸120分wwwwwwwww T1用了全机房最慢的写法,导致改掉死循环T掉的一个点以后还是死活过不了最后一个点.T2全 ...

  5. java-编码解码-流的操作规律

    一 编码解码 字符串:String 字节数组:byte[]字符串--编码(getBytes())-->字节数组字节数组--解码(new String(byte[]))-->字符串 publ ...

  6. 依赖注入的方式（DI）

    方式: 接口注入: setter方法注入: 构造方法注入: 接口注入: public class ClassA { private InterfaceB clzB; public void doSom ...

  7. Leetcode8.String to Integer (atoi)字符串转整数(atoi)

    实现 atoi,将字符串转为整数. 该函数首先根据需要丢弃任意多的空格字符,直到找到第一个非空格字符为止.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字 ...

  8. phpBOM头(字符&#65279;)出现的原因以及解决方法_PHP程序员博客|高蒙个人博客

    今天在项目中发现,客户端在使用ajax得到返回值时,无法匹配字符串.总是报错,打开页面接口发现,页面的头部出现了的字符(BOM头),找到问题了,那么直接用代码清除掉即可. php隐形字符 // 如 ...

  9. KMLLayer

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

    示意图: demo <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...