引言

学习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. 微信小程序开发小技巧——单击事件传参、动态修改样式、轮播样式修改等

    一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元 ...

  2. 从0开始编写dapper核心功能、压榨性能、自己动手丰衣足食

    我偶然听说sqlsugar的性能比dapper强.对此我表示怀疑(由于我一直使用的dapper存在偏见吧),于是自己测试了sqlsugar.freesql.dapper发现他们的给我的结果是 sqls ...

  3. 功能模块图、业务流程图、处理流程图、ER图，数据库表图（概念模型和物理模型）画法

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

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

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

  5. 【Python】模块学习之matplotlib柱状图、饼状图、动态图及解决中文显示问题

    前言 众所周知,通过数据绘图,我们可以将枯燥的数字转换成容易被人们接受的图表,从而让人留下更加深刻的印象.而大多数编程语言都有自己的绘图工具,matplotlib就是基于Python的绘图工具包,使用 ...

  6. 腾讯正式开源图计算框架Plato，十亿级节点图计算进入分钟级时代

    腾讯开源再次迎来重磅项目,14日,腾讯正式宣布开源高性能图计算框架Plato,这是在短短一周之内,开源的第五个重大项目. 相对于目前全球范围内其它的图计算框架,Plato可满足十亿级节点的超大规模图计 ...

  7. 解谜：为何用了9-Patch背景图后自带Padding属性？

    本次分享的主题源于笔者在实际开发中遇到的问题. 具体现象为:当普通的9-Patch图用作TextView的backGround属性后,整个TextView便有了一定的Padding值.但笔者并没有给定 ...

  8. 鱼骨图是什么？怎么用iMindMap画鱼骨图？

    鱼骨图是一种发现问题"根本原因"的方法,它也可以称之为"因果图".其特点是简捷实用,深入直观."鱼头"处标注的一般是问题或后果.按出现机会多 ...

  9. 图数据库HugeGraph：HugeGraph-Hubble基于Web的可视化图管理初体验

    原创/朱季谦 一.HugeGraph-Hubble简介 关于HugeGraph,官方资料是这样介绍的,它是一款易用.高效.通用的开源图数据库系统(Graph Database), 实现了 Apache ...

随机推荐

  1. 详解Maple如何公式推导和生成代码

    公式推导 直观自然的数学表达式,智能的关联菜单,交互式助手等协助您从容通过推导过程,让您更容易地完成解决方案的开发,快速.无错! 分析 Maple 内置超过大量的计算函数,包括积分变换,微分方程求解器 ...

  2. IT人士必去的10个网站

    1.Chinaunix 网址:http://www.chinaunix.net/ 简介:中国最大的linux/unix技术社区. 2.ITPub 网址:http://www.itpub.net/ 简介 ...

  3. Android Support Library

    title: Android Support Library tags: Support Library,支持库 grammar_cjkRuby: true --- DATE: 2016-5-13. ...

  4. ASP.Net WebForm温故知新学习笔记：二、ViewState与UpdatePanel探秘

    开篇:经历了上一篇<aspx与服务器控件探秘>后,我们了解了aspx和服务器控件背后的故事.这篇我们开始走进WebForm状态保持的一大法宝—ViewState,对其刨根究底一下.然后,再 ...

  5. .Net开发笔记（二十一） 反射在.net中的应用

    反射概念在网上到处都有,但是讲到的具体的应用很少,一个重要的原因是现实中真的很少用得到它.引用msdn上对“反射”的解释: "通过 System.Reflection 命名空间中的类以及 S ...

  6. 在C#代码中应用Log4Net（一）简单使用Log4Net

    首先让我们先把Log4Net跑起来,示例代码在文章最后面可以下载 1.先把Log4Net引入到工程中,为了演示方便,我们先建立一个winform程序.在程序的根目录下面,建立一个Libs文件夹,以便存 ...

  7. AD域内DNS服务器如何解析公网域名

    原创地址:http://www.cnblogs.com/jfzhu/p/4022999.html 转载请注明出处 AD域内需要有DNS服务器,用于解析域内的计算机名,但是域内的计算如何解析公网的域名呢 ...

  8. 学习SpringMVC——从HelloWorld开始

    前言: 时隔十二年,中国女排最终过关斩将,用3:1的成绩证明了自己的实力,霸气夺冠,为中国赢得了一枚意义非常的金牌.这是一次全民的狂欢,一场视听盛宴,带给我们不仅是熠熠生辉的金牌,更传递出的是一种女排 ...

  9. iOS-网络处理

    1.iOS-网络基础 2.iOS-网络处理框架AFN 3.iOS-网络爬虫

  10. Zabbix实现微信报警

    一.  申请企业微信账号,申请地址 https://qy.weixin.qq.com/ 二. 登陆企业微信账 图一 图二 2.添加微信账号 图一 图二 完成以上步骤后 就完成了微信账号的添加 三.新建 ...