<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Banner</title>

	<style type="text/css">

	*{margin:0;padding: 0;}

	.container{width: 1079px;height: 500px;overflow: hidden;margin:0 auto;position: relative;}

	#list{width: 7553px;height: 500px;position: absolute;}

	#list img{width: 14.285715%;;float: left;}

	.arrow{position: absolute;color:#fff;text-decoration: none;bottom: 20px;text-align: center;width: 40px;height: 40px;font-size: 30px;top:230px;font-weight: bold;background: rgba(0,0,0,0.3);}

	#left{left:20px;}

	#right{right: 20px;}

	</style>

</head>

<body>

	<div class="container" id="container">

		<div id="list">

			<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>

			<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>

			<img alt="2" src='http://i1.piimg.com/576342/82507633c9d21ebf.jpg'>

			<img alt="3" src='http://image60.360doc.com/DownloadImg/2013/04/1613/31674132_21.jpg'>

			<img alt="4" src='http://i1.piimg.com/576342/5935e1921d2d5fb0.jpg'>

			<img alt="5" src='http://i1.piimg.com/576342/a59848cad8818bd4.jpg'>

			<img alt="1" src='http://i1.piimg.com/576342/9bc3a6f38f9eca10.jpg'>

		</div>

		<a href="javascript:void(0)" class="arrow" id="left" disabled="false"><</a>

		<a href="javascript:void(0)" class="arrow" id="right" disabled="false">></a>

	</div>

	<script type="text/javascript">

	window.onload = function(){

		var oContainer = document.getElementById('container');

		var oList = document.getElementById('list');

		var oLi = oList.getElementsByTagName('img');

		var oLeft = document.getElementById('left');

		var oRight = document.getElementById('right');

		var oWidth = oContainer.offsetWidth;

		var animated = false;

		oList.style.left = -oWidth + 'px';

		function animate(offset){

			console.log("offset:" + offset);

			console.log("oWidth:" + oWidth);

			animated = true;

			var newLeft = parseInt(oList.offsetLeft) + offset;

			var time = 300;

			var interval = 10;

			var speed = offset / (time / interval);

			function go(){

				if((speed > 0 && oList.offsetLeft < newLeft) || (speed < 0 && oList.offsetLeft > newLeft)){

					oList.style.left = oList.offsetLeft + speed + 'px';			//动画效果

					setTimeout(go,interval);						//递归

				}else{

					oList.style.left = newLeft + 'px';

					if(newLeft > -oWidth){					//判断图片是第一张还是最后一张

						oList.style.left = -oWidth * 5 + 'px';

					}

					if(newLeft < (-oWidth * 5)){

						oList.style.left = -oWidth + 'px';

					}

					animated = false;

				}

			}

			go();

		}

		oRight.onclick = function(){

			if(animated){

				return ;

			}

			animate(-oWidth);

		}

		oLeft.onclick = function(){

			if(animated){

				return;

			}

			animate(oWidth);

		}

	}

	</script>

</body>

</html>

　　

可直接运行

放7张图片的原因是为了动画效果更加平滑

不会造成第一张图片或者最后一张图片过渡效果的时候是空白

本来打算用CSS3来做动画效果

但是发现多次点击后会图片会偏移原来的位置

所以使用原生JavaScript来编写动画

下一篇准备写个百分比自适应布局的轮播图

【JavaScript】固定布局轮播图特效的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 2、原生js实现轮播图特效

    很多很多网站经常会用到一个特效,那就是轮播图,对于日新月异的前端技术来说其实就是一个框架一个接口的事,但轮播的原理是什么?用最原始的javascript来写又是怎样的呢?本人是一枚菜鸟,这篇文章就当做 ...

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

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

  5. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  6. javascript写的轮播图

    欢迎指点! 先放上效果图: 鼠标移入界面后: <body onselectstart="return false;" style="-moz-user-select ...

  7. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  8. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

  9. JS实现轮播图特效（带二级导航）

    按照国际惯例先放效果图 index.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. EasyUI、Struts2、Hibernate、spring 框架整合

    经历了四个月的学习,中间过程曲折离奇,好在坚持下来了,也到了最后框架的整合中间过程也只有自己能体会了. 接下来开始说一下整合中的问题和技巧: 1,  jar包导入 c3p0(2个).jdbc(1个). ...

  2. 利用JS制作简便计算器

    var d; var a=prompt("请输入数字"); a=parseInt(a); if(isNaN(a)){ alert("請輸入正確數字"); } e ...

  3. 服务器CGI运行机制

    CGI概括: 定义 通用网关接口(Common Gateway Interface)是HTTP服务器与你的或其它机器上的程序进行"交谈"的一种工具,其程序须运行在网络服务器上. 功 ...

  4. C#位运算讲解与示例

    首先每一个权限数都是2的N次方数 如:k1=2 ; //添加 k2=4 ; //删除 k3=8; //修改 ... 如此定义功能权限数,当需要组合权限时,就需要对各个所拥有的权限数按位或了. 如: p ...

  5. 关于json-p

    关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...

  6. C++ int与string的转化

    int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释.缺省情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上前缀,告诉编译器按照不同进制去解释.8进制 ...

  7. solar system by HTML5

    solar system by HTML5 星际穿越感觉很炫酷啊,网易貌似做了个专题在朋友圈挺火的.用canvas模拟太阳系,嗯,不错昂! 代码及效果 See the Pen GgpRjN by Na ...

  8. overflow:hidden 影响布局的问题

    a 与 b 都是 inline-block且高与父元素 c 相同均为 30px,而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐,相 ...

  9. 无法删除对象 '产品'，因为该对象正由一个 FOREIGN KEY 约束引用。

    在删除northwindcs表时,发生报错,消息 3726,级别 16,状态 1,第 2 行,无法删除对象 '产品',因为该对象正由一个 FOREIGN KEY 约束引用.此时判断是因为有其他表的外键 ...

  10. centos中安装字体

    转载自:http://blog.csdn.net/wlwlwlwl015/article/details/51482065 在使用phantomjs做自动化网页截图时,发现截图都没有文字.最后好久才发 ...