引言

学习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. 2016huasacm暑假集训训练五 H - Coins

    题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/H 题意:A有一大堆的硬币,他觉得太重了,想花掉硬币去坐的士:的士司机可以不找零,但 ...

  2. 五、jquery使用工具函数

    工具函数对应的网址在 http://api.jquery.com/categouy/utilities/   工具函数处理对象的不同,可以将其分为几大类别:浏览器的检测.数组和对象的操作.字符串的操作 ...

  3. Mysql常用表操作 | 单表查询

    160905 常用表操作 1. mysql -u root -p 回车 输入密码   2. 显示数据库列表 show databases     3. 进入某数据库 use database data ...

  4. Hadoop 和 HDInsight：Windows Azure 中的大数据

    世界的大数据包含一个庞大而充满活力的生态系统,但一个开放源码项目上面有这一切,那就是 Hadoop 的王朝. Hadoop 是事实上的标准的分布式的数据运算.Hadoop 提供了一个 MapReduc ...

  5. 走向面试之数据库基础：二、SQL进阶之case、子查询、分页、join与视图

    一.CASE的两种用法 1.1 等值判断->相当于switch case (1)具体用法模板: CASE expression WHEN value1 THEN returnvalue1 WHE ...

  6. MySQL 处理插入过程中的主键唯一键重复值办法

    200 ? "200px" : this.width)!important;} --> 介绍 本篇文章主要介绍在插入数据到表中遇到键重复避免插入重复值的处理方法,主要涉及到I ...

  7. gulp使用小结(一)

    这篇文章不会介绍 gulp 的起源.发展:不会去一个个讲解 gulp API:也不想出现大段大段的 gulpfile.js 代码:更木有帮你分析 gulp 实现原理,只有一些我自己对 gulp 的使用 ...

  8. Dash文档制作教程

    前言 什么是Dash 面向程序员的文档库(Mac) 代码片段管理工具 这是强烈推荐给每天在各种API文档中摸爬滚打的程序员们的神器. 为什么要自己制作文档 官方的源中没有相关文档 文档在离线下体验更好 ...

  9. Mac下安装与配置Go语言开发环境

    1.官网下载安装包(需FQ) https://storage.googleapis.com/golang/go1.7.darwin-amd64.pkg 2.配置Go环境变量GOPATH和GOBIN ( ...

  10. IIS7.5+WebConfig实现页面伪静态和301重定向

    IIS7.5+WebConfig实现页面伪静态和301重定向 使用URLRewriter组件在windows 2003 +iis 6.0下配置伪静态的文章网络上一大堆.但在iis7.0或iis 7.5 ...