引言

学习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 class="slider">
			<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 class="num">
			<li class="on">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</div>
</body>
</html>

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图的更多相关文章

  1. 功能模块图、业务流程图、处理流程图、ER图,数据库表图(概念模型和物理模型)画法

    如果你能使用计算机规范画出以下几种图,那么恭喜你,你在我这里被封为学霸了,我膜拜ing-- 我作为前端开发与产品经理打交道已有5-6年时间,产品经理画的业务流程图我看过很多.于是百度搜+凭以往经验脑补 ...

  2. FusionChart实现柱状图、饼状图的动态数据显示 附Demo

    最近做的项目中需要用饼状图显示——'问卷调查'的统计结果(之前用过FusionChart做过柱状图的数据展示,那还是两年前的事了),在网上查了下FusionChart实现饼状图显示方面的资料,却发现资 ...

  3. C3属性的轮播图(持续更新)

    天气好冷,都不想写代码.就先写个没有焦点的轮播图,过两天在补全. 用的是CSS3的属性 过渡transition 和 转换 transfrom:translateX() 只做了轮播和 鼠标进入停止轮播 ...

  4. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  5. 自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  6. 百度的echart环形图颜色动态设置

    自己参与的有一个项目需要用到环行图,考虑到百度的echart功能很强大兼容性又挺好就使用了这个插件,但是在颜色配置的时候出现了问题按照参考文档的方法是用color:Array这样的形式,但是不知道在哪 ...

  7. 数据可视化:Echart中k图实现动态阈值报警及实时更新数据

    1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:

  8. Unity3D研究院之动态修改烘培贴图的大小&amp;脚本烘培场景

    Unity默认烘培场景以后每张烘培贴图的大小是1024.但是有可能你的场景比较简单,用1024会比较浪费.如下图所示,这是我的一个场景的烘培贴图,右上角一大部分完全是没有用到,但是它却占着空间.  有 ...

  9. Rational Rose正逆向工程(类图转Java代码,Java代码转类图)

     一,正向工程     1.设置默认语言为Java,Tools->Options->Notation->default:选择Java.         2.设置环境变量Class ...

随机推荐

  1. oracle与sqlserver部分区别

    oracle和sqlserver的区别:1,执行修改操作要接commit,不然数据仅仅只是查看,并不是提交数据2,oracle不能使用select 字段 这种查看方式查看数据:3,oracle存储过程 ...

  2. 【C#进阶系列】29 混合线程同步构造

    上一章讲了基元线程同步构造,而其它的线程同步构造都是基于这些基元线程同步构造的,并且一般都合并了用户模式和内核模式构造,我们称之为混合线程同步构造. 在没有线程竞争时,混合线程提供了基于用户模式构造所 ...

  3. PRINCE2第二个原则

    PRINCE2要求项目团队吸取以前的经验教训,在项目生命周期中发现.记录和应对.吸取经验教训,应该记录在整个生命周期中,项目准备期应该回顾以往类似项目,看看是否有经验教训可以应用,如果项目是第一次做, ...

  4. reverseajax(comet) socket 杂记

    http://blog.it985.com/7797.html http://www.ibm.com/developerworks/web/library/wa-reverseajax1/index. ...

  5. ejb3: message drive bean(MDB)示例

    上一篇已经知道了JMS的基本操作,今天来看一下ejb3中的一种重要bean:Message Drive Bean(mdb) 如果要不断监听一个队列中的消息,通常我们需要写一个监听程序,这需要一定的开发 ...

  6. NEC学习 ---- 布局 -三列, 左右定宽,中间自适应

    ---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...

  7. mysql 把文件中的sql语句导入到mysql中

    mysql -uroot -proot -Dcollege</home/wwwroot/default/data/xlxxb_2014-10-16.txt;

  8. Android ViewPager 里有子ViewPager的事件冲突

    在Android应用中有时候要用到类似网易新闻左右滑动页面且页面里又有左右滑动的图片功能,我不知道网易是怎么实现的,本人的做法是外面的BaseFragmentActivity布局就是TabViewPa ...

  9. Rehat 5.8下oracle11g安装

    Oracle 11g Redhat 5安装  一.检查硬件是否满足要求 检查一内存 On Linux x86: At least 1 GB of RAM 内存至少1G To determine the ...

  10. switch语句的使用,非常好

    这是谭浩强课本上枚举类型的例子,但是我贴这个例子的代码不是因为枚举类型,是因为这个代码使用switch语句用得非常好,值得一贴. 题目是这样的:有红.黄.蓝.白.黑5中颜色的球若干,依次取出3个球,求 ...