引言

学习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. 10 Cookie/Session

    JSP/EL入门     * SUN提供了开发WEB资源的技术     Servlet/JSP              * response.getWriter().write();         ...

  2. C#自旋的艺术

    CODE1: while (status == ServerStatus.Started) { if (*TaskLocker > 0) { for (int i = 0; i != *Leve ...

  3. 渣渣小本求职复习之路每天一博客系列——Java基础(9)

    ———————————————————————今天不闲聊————————————————————————————— 第十一章:线程 第四节:synchronized与同步 首先,我们来看一段代码: p ...

  4. http异步请求的一种调用示例

    在异步编程中,经常会调用已经写好的异步方法.这时会有一个需求:根据异步方法的返回值,做一些别的操作. 1.0 重新开启一个异步方法,在这个新的异步方法内部,调用需要请求的异步方法.示例: static ...

  5. PHP常用的一些正则表达式

    附一些常用的正则运算: 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0- ...

  6. Android菜鸟成长记3-activity类

    Activity 一.什么是activity Activity 是用户接口程序,原则上它会提供给用户一个交互式的接口功能.它是 android 应用程序的基本功能单元.Activity 本身是没有界面 ...

  7. Yii2中系统定义的常用路径别名,如果获取web的url

    下面这些别名都是在Yii2里面系统定义的,可以直接拿来就用 '@yii' => '@yii/swiftmailer' => string 'C:\wamp\www\advanced\ven ...

  8. iOS的I/O操作

    一般而言,处理文件时都要经历以下四个步骤: 1.创建文件 2.打开文件,以便在后面的I/O操作中引用该文件 3.对打开的文件执行I/O操作(读取.写入.更新) 4.关闭文件 iOS中,对文件常见的处理 ...

  9. oracle11g 修改字符集 修改为ZHS16GBK

    1.cmd下,cd到oracle数据库软件的服务器端 如:D:\app\Administrator\product\11.2.0\dbhome_1\BIN 2.输入set ORACLE_SID=你想进 ...

  10. hdu 4301(基本dp)

    题意:就是给你一块2*n的巧克力,让你把它分成x块,并且每一个单位的巧克力各不相同,问有多少种分法? 分析:用dp[i][j][k],表示到巧克力的第二列时,巧克力被分成了j快,k用来表示第i列上下两 ...