引言

学习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. js_截取Url值

    "total" -->传递参数时的名字 var reg = new RegExp("(^|&)" + "total" + &q ...

  2. 搭建spark环境

    1.wget http://www.apache.org/dyn/closer.cgi/spark/spark-1.2.0/spark-1.2.0-bin-hadoop2.4.tgz

  3. WebServer+ADO+百万数据查询

    很简单的demo,查询速度快,易理解,废话不说  上demo 看完就明白了 源码地址:http://files.cnblogs.com/files/SpadeA/WebDemo.zip 这是关于Web ...

  4. C#如何测试代码运行时间

    1.System.Diagnostics.Stopwatch stopwatch = new Stopwatch(); stopwatch.Start(); // 开始监视代码运行时间 // 需要测试 ...

  5. RPC 的概念模型与实现解析

    今天分布式应用.云计算.微服务大行其道,作为其技术基石之一的 RPC 你了解多少?一篇 RPC 的技术总结文章,数了下 5k+ 字,略长,可能也不适合休闲的碎片化时间阅读,可以先收藏抽空再细读:) 全 ...

  6. 剑指Offer面试题：22.二叉搜索树的后序遍历序列

    一.题目:二叉搜索树的后序遍历序列 题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则返回true,否则返回false.假设输入的数组的任意两个数字都互不相同. 例如在下面 ...

  7. Module Zero之用户管理

    返回<Module Zero学习目录> 用户实体 用户管理者 用户认证 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

  8. Intellij IDEA 13.1.3 打开多个窗口项目

    作者QQ:1095737364 Intellij 是Java开发人员最喜欢的编程工具.默认情况只能打开一个窗口一个项目,本文就是教大家打开多个窗口,实现同时打开多个项目 第一步:打开Intellij, ...

  9. salesforce 零基础学习（五十一）使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)

    此篇请参看:https://resources.docs.salesforce.com/202/latest/en-us/sfdc/pdf/salesforce_developer_environme ...

  10. [erl] erlang 进程注册和注销

    想要注册一个进程,必须先要创建一个进程. 如何创建一个进程,可以使用spawn.spawn_link,它们虽然都能创建进程,但是也有微妙的区别: 1)当前进程中创建一个并行进程,当被生成的进程崩溃时, ...