引言

学习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. c#控制打印机杂项

    因项目中需要用到控制打印机的相关信息,此贴将网络寻找的资料做了些整理 1. C# 如何设置系统的默认打印机 using System.Runtime.InteropServices;   [DllIm ...

  2. fwrite写入文件不成功bug

    文件写入了,只是从头覆盖了!因为在fwrite():前面 文件位置指针是是SEEK_SET,即首位置.在fwrite(fileHeader, 1, 10, file); 前面加上一行fseek(fil ...

  3. AJXA！让体验更美好

    AJXA = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服 ...

  4. 用Fmx调用Bass.dll

    先上图 帮亲戚做个小软件,选用FMX,因为画面不会像vcl那样在图片多的时候闪烁.还能添加动画 但是MediaPlayer播放音乐视频真是不给力,视频没想到好办法.音频方面想到之前万一的Bass.ll ...

  5. 新书到手 TRANSACTION PROCESSING:CONCEPTS AND TECHNIQUES

    新书到手 TRANSACTION PROCESSING:CONCEPTS AND TECHNIQUES Jim Gray大神的著作 本文版权归作者所有,未经作者同意不得转载.

  6. .NET短距离领域通信-32feet.NET

    32feet.NET[http://32feet.codeplex.com/]是shared-source的项目,支持CF.net 2.0以及桌面版本.NET framework,提供短距离领域(pe ...

  7. Redis性能问题排查解决手册(七)

     阅读目录: 性能相关的数据指标 内存使用率used_memory 命令处理总数total_commands_processed 延迟时间 内存碎片率 回收key 总结 性能相关的数据指标 通过Red ...

  8. [nRF51822] 8、基础实验代码解析大全 · 实验11 - PPI

    前一篇分析了前十个基础实验的代码,从这里开始分析后十个~ 一.PPI原理: PPI(Programmable Peripheral Interconnect),中文翻译为可编程外设互连. 在nRF51 ...

  9. Android APK是否需要预解压

    今天在逛论坛的时候,发现有一个朋友问的问题.其主要目的,是想实现 玩家首次进入游戏的时候,或者新安装了版本的时候,对APK进行解压,写入SD卡.这样游戏运行过程中,将不会再从APK中读取资源. 以提高 ...

  10. jdbc在mysql下一次执行多条sql脚本

    默认连接mysql的时候一次只能执行一条sql.要批量执行sql需要在jdbcUrl中增加“allowMultiQueries=true”参数,完整jdbcUrl如下:  jdbc:mysql://l ...