引言

学习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. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  2. 迭代器学习之一:使用IEnumerable和IEnumerator接口

    写博客是检验我学习的成果之一以及自我总结的一种方式,以后会经常利用这种方式进行技术交流和自我总结,其中认识不深难免会有错误,但是一直懂得不懂就问,不懂就学的道理! 1.首先看一个简单的列子 , , , ...

  3. Tomcat笔记

    总体架构: 由三部分组成:Service.Connector.Container 多个Connector对应一个Container,构成一个Service 为Service提供一个生存环境 如何处理多 ...

  4. 高阶c++

    模板就是宏.模板能不能再往一步? http://perilla.codeplex.com/ enhanced c++ template grammar: rule 1: c++ identifier ...

  5. net-snmp源码VS2013编译添加加密支持(OpenSSL)

    net-snmp源码VS2013编译添加加密支持(OpenSSL) snmp v3 协议使用了基于用户的安全模型,具有认证和加密两个模块. 认证使用的算法是一般的消息摘要算法,例如MD5/SHA等.这 ...

  6. 设计模式--外观(Facade)模式

    Insus.NET在去年有写过一篇<软件研发公司,外观设计模式(Facade)>http://www.cnblogs.com/insus/archive/2013/02/27/293606 ...

  7. Caused by: java.lang.UnsupportedOperationException

    对Arrays.asList()返回的List进行操作之后报错Caused by: java.lang.UnsupportedOperationException 让我们来看一下Arrays.asLi ...

  8. linux tricks 之数据对齐。

    转载:http://blog.chinaunix.net/uid-20608849-id-3027953.html   内核为了保持最大的兼容性和代码灵活性,不可能直接对某个数据类型定义它的大小范围. ...

  9. 软件工程 speedsnail 第二次冲刺7

    20150524 完成任务:蜗牛碰到线后速度方向的调整: 遇到问题: 问题1 方向用到abs等函数,不熟悉 解决1 查看文档 明日任务: 蜗牛碰到线后速度方向的调整:(做优化)

  10. 数据结构 -- 简单图的实现与遍历 (Java)

    ---恢复内容开始--- 作者版权所有,转载请注明出处,多谢. http://www.cnblogs.com/Henvealf/p/5534071.html 前些天因为某些原因,就试着回想一下图(gr ...