你的位置:首页 > Java教程

[Java教程]自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言

     学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了。现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现。

实现原理

     1、除第一张图片外,其余图片全部隐藏,4张图片重叠起来。

     2、导航按钮添加mouseover和mouseleave事件。

     3、设置interval函数,启动定时器调用ShowImg函数。

     4、动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属性,在以前滑动门中也是这个原理。

 

效果图(图片引用自橡树小屋博客)

 

实现代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Index</title><script type="text/javascript" src="js/jquery-1.4.1.js"></script><style type="text/css">	*{margin: 0;padding: 0;}	ul li{list-style: none;}	#scrollpics{width: 478px;height: 286px;overflow: hidden;position: relative;margin:30px 50px;}	.num{position:absolute;right: 8px;bottom: 8px;}	.num li {float:left;color:#FF7300;text-align: center;width: 16px;height: 16px;line-height: 16px;border: 1px solid #FF7300;background-color: #fff; border-radius: 10px;overflow: hidden;cursor: pointer;margin-left: 7px;}	.num li.on {color:#fff;background-color: #FF7300;}</style><script type="text/javascript">		var index=0;	var adTimer;	$(function(){		var len = $("ul.num li").length;		$(".num li").mouseover(function(){			index=$(".num li").index(this);			ShowImg(index);		});		$("#scrollpics").hover(function(){			clearInterval(adTimer);		},function(){			adTimer=setInterval(function(){				ShowImg(index);				index++;				if(index==len){					index=0;				}			},3000)		}).trigger('mouseleave');	});	function ShowImg(index){		var adHeight=$("#scrollpics>ul>li:first").height();		$(".slider").stop(true,false).animate({			"marginTop":-adHeight*index+"px"		},1000);		$(".num li").removeClass("on").eq(index).addClass("on");	}</script></head><body>	<div id="scrollpics">		<ul >			<li><img src="img/p1.jpg"></li>			<li><img src="img/p3.jpg"></li>			<li><img src="img/p4.jpg"></li>			<li><img src="img/p5.jpg"></li>		</ul>		<ul >			<li >1</li>			<li>2</li>			<li>3</li>			<li>4</li>		</ul>	</div></div></body></html>