<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>每次移1px的案例</title>

	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

	<style type="text/css">

		body{

			background: pink;

		}

		.d1{

			margin-top: 20px;

			width: 100px;

			overflow: hidden;

			position: relative;

			height: 80px;

			background: #fff;

		}

		.d2{

			width: 1880px;

			position: absolute;

		}

		.d2>p{

			margin-top: 0px;

			float: left;

			width: 100px;

		}

		.p1{

			background: red;

		}

		.p2{

			background: yellow;

		}

		.p3{

			background: green;

		}

	</style>

</head>

<body>

	<div class="d1">

		<div class="d2">

			<p class="p1">1</p>

			<p class="p2">2</p>

			<p class="p3">3</p>

		</div>

	</div>

</body>

</html>

<script type="text/javascript">

	var num=0;

	var pWidth = $('.d2>p').innerWidth()*$('.d2>p').length;

	var d2content =$('.d2').html();

	$('.d2').append(d2content)

	var time = setInterval(function(){

		num++

		if(num>3){

			num=0;

		}

		$('.d2').animate({'left':'-'+num*100+'px'});

	},1000)

</script>

<!--

	1、做轮播图如果是每次移动1px就用css({'left':'-'+num+'px'}),不要用animate({'left':'-'+num+'px'})因为animate其实是css({'left':'-'+num+'px'})+css的transition组合，每次会有一卡一卡的效果（这里的num所有要偏移图片集合的宽度）。

	2、做轮播图如果是一次性移动一整张图片用css({'left':'-'+num*100+'px'})无动画效果直接切换到下一张，用animate({'left':'-'+num*100+'px'})有动画效果，会看到是一整张图从右边到左边一个滑动的效果（这里的num是图片的张数，100px是每张图片的完度）。

 -->

讲解

<div class="d1">

	<div class="d2">

		<p class="p1">1</p>

		<p class="p2">2</p>

		<p class="p3">3</p>

	</div>

</div>


//最外层 一定要设置需要显示的宽度、隐藏宽度以外的部分、相对定位。

.d1{

	width: 300px;

	overflow: hidden;

	position: relative;

}

//第二层 宽度设置到最大、绝对定位。这是被移动的部分。

.d2{

	width: 1880px;

	position: absolute;

}

//第三层 浮动及可。

.d2>p{

	float:left;

}


//为了能把d2里的内容无缝的轮播,需要把d2的内容复制一份.滚动的宽度不大于所有p集合的宽度(没有复制前)

	var num=0;

	var pWidth = $('.d2>p').innerWidth()*$('.d2>p').length;

	var d2content =$('.d2').html();

	$('.d2').append(d2content)

	var time = setInterval(function(){

		num++

		if(num>pWidth){

			num=0;

		}

		$('.d2').css('left','-'+num+'px');

	},30)

每次移1px的无缝轮播图的更多相关文章

  1. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  2. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  3. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

  4. jQuery无缝轮播图思路详解-唯品会

    效果图如上: 需求:图片自动轮播,鼠标移上停止播放,离开恢复播放,箭头切换图片. html代码 <!--轮播图大盒子开始--> <div class="wrap" ...

  5. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  6. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  7. js之无缝轮播图

      HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  8. 原生JS无缝轮播图

    (1)原理介绍 (2)静态布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  9. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

随机推荐

  1. GStreamer 从摄像头获取图像 转264

    1.这里有个简单的例子,可以看看GStreamer如何编程的. 2.GStreamer  GstAppSink的官方Document,翻译了一下它的描述部分,点击这里. 3.GStreamer  Gs ...

  2. 超限学习机 (Extreme Learning Machine, ELM) 学习笔记 (一)

    1. ELM 是什么 ELM的个人理解: 单隐层的前馈人工神经网络,特别之处在于训练权值的算法: 在单隐层的前馈神经网络中,输入层到隐藏层的权值根据某种分布随机赋予,当我们有了输入层到隐藏层的权值之后 ...

  3. mySql执行效率分析

    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享: 机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试, ...

  4. <JAVA图像学习笔记>关于Graphics/Graphics2D以及简单的几何图像制作（一个简单钟表的实现）

    题外话:正好赶上OperatingSystem的作业要做一个模拟线程/进程调度的问题,决定用JAVA实现才发现这些内容和之前学过的GUI制作是两码事儿- -b 通过学习java.swing库的Acti ...

  5. DubboAdmin平台

    DubboAdmin部署 将dubbo-admin.war放入到TomcatWebapps目录下,修改dubbo.properties中的Zookeeper连接地址即可. dubbo-admin放到 ...

  6. JAVA-关键字&标识符

    关键字: 关键字就是在java程序中具备特殊含义的标识符.关键字一般用于描述一个程序的结构或者表示数据类型.他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名.方法名.类名.包名. ...

  7. 用gdisk调整gpt/ext4分区大小

    主机: CentOS release 6.4 (Final) 目的:从/home分区分出100G来创建新分区/vm 参考: http://ryanclouser.com/?p=66 http://fa ...

  8. 如何设置android studio让程序运行在真机中

    1.Run——>Edit Configurations... 2.运行

  9. redis实现分布式锁——核心 setx+pipe watch监控key变化-事务

    如何设计一把分布式锁 我们用 redis 来实现这把分布式的锁,redis 速度快.支持事务.可持久化的特点非常适合创建分布式锁. 分布式环境中如何消除网络延迟对锁获取的影响 锁,简单来说就是存于 r ...

  10. 国内镜像pip

    建议非清华大学校内的使用这个镜像: http://e.pypi.python.org/simple(这也是一个http://pypi.v2ex.com/simple),清华校内的就使用这个:http: ...