DOTA轮播

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

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

一、HTML代码分析：

<body>
	<div class="dota">
		<ul id="content">
			<li><a href="#"><img src="images/1.jpg"/></a></li>
			<li><a href="#"><img src="images/2.jpg"/></a></li>
			<li><a href="#"><img src="images/3.jpg"/></a></li>
			<li><a href="#"><img src="images/4.jpg"/></a></li>
			<li><a href="#"><img src="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 其他的轮播效果。

猜你喜欢