<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Banner-jQuery</title>

	<style type="text/css">

	*{margin:0;padding: 0;}

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

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

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

	.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;}

	.btns{width: 100px;height: 10px;position: absolute;bottom: 20px;left: 42%;}

	.btns span{cursor: pointer;border: 1px solid #fff;border-radius: 50%;margin-right: 8px;-webkit-border-radius:50%;-moz-border-radius:50%;width: 10px;height: 10px;float: left;}

	.btns .on{background: orange;}

	</style>

	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>

</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" ><</a>

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

		<div class="btns">

			<span class="on" index="1"></span>

			<span index="2"></span>

			<span index="3"></span>

			<span index="4"></span>

			<span index="5"></span>

		</div>

	</div>

	<script type="text/javascript">

	$(function(){

		var oList = $("#list");

		var oRight = $("#right");

		var oLeft = $("#left");

		var oWidth = parseInt(oList.css('width')) / 7;		//计算图片的宽度从而达到自适应屏幕宽度

		var oSpan = $(".btns span");

		var len = 5;

		var index = 1;

		var interval = 3000;

		var timer = null;

		oList.css('left',-oWidth);				//图片加载完成时将图片向左偏移一张图片

		function animate(offset){								//过渡效果

			var newLeft = parseInt(oList.css('left')) + offset;			//点击后的图片偏移量

			oList.animate({'left':newLeft + 'px'},function(){

				if(newLeft > 0){									//判断图片是否已经循环一次

					oList.css('left',-oWidth * len);

				}

				if(newLeft < -oWidth * 5){

					oList.css('left',-oWidth);

				}

			});

		}

		function showBtns(){				//按钮过渡

			oSpan.each(function(){					//遍历每个按钮将其Class设置为空

				$(this).attr('class','');

			});

			$(".btns > span").eq(index - 1).addClass('on');			//将当前Span的索引Class设置为on

		}

		function autoplay(){						//自动播放

			timer = setTimeout(function(){

				oRight.trigger('click');

				autoplay();

			},interval);

		}

		function stop(){

			clearInterval(timer);

		}

		oList.on('mouseover',function(){			//判断鼠标是否在容器上面

			stop();

		});

		oList.on('mouseout',function(){

			autoplay();

		});

		oRight.on('click',function(){

			if(oList.is(':animated')){

				return;

			}

			if(index == 5){			//向右点击 index索引+1

				index = 1;

			}else{

				index += 1;

			}

			animate(-oWidth);

			showBtns();

		});

		oLeft.on('click',function(){

			if(oList.is(':animated')){

				return;

			}

			if(index == 1){			//向左点击 index索引-1

				index = 5;

			}else{

				index -= 1;

			}

			animate(oWidth);

			showBtns();

		});

		oSpan.each(function(){					//底部按钮点击切换图片

			$(this).on('click',function(){

				if(oList.is(":animated") || $(this).attr('class') == "on"){

					return;

				}

				var myIndex = $(this).attr('index');

				var offset = (myIndex - index) * -oWidth;

				index = myIndex;

				animate(offset);

				showBtns();

			})

		})

		autoplay();

	});

	</script>

</body>

</html>

　　

复制代码，将图片改成相同像素图片即可直接使用

el.animate()确实好用，原生JS写一大串动画过渡代码，animate只写一行即可

这种方法的好处主要是在与百分比自适应屏幕，灵活性比之前的固定布局好不少

同时比上一篇轮播图增加了按钮点击切换图片

【jQuery】百分比自适应屏幕轮播图特效的更多相关文章

  1. JQuery图片自适应窗口轮播图（淡入淡出效果）

    <script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...

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

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

  3. 【JavaScript】固定布局轮播图特效

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

  4. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  5. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  6. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

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

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

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

  8. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  9. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

随机推荐

  1. Python -- 数据加载、存储与文件格式

    标签(空格分隔): Python 读入读出通常可以划分为几个大类:读取文本文件和其他更高效的磁盘存储格式,加载数据库中的数据,利用Web API操作网络资源. 读写文本格式的数据 pandas提供了一 ...

  2. 【转载】动态新增svg节点

    原文地址:http://blog.csdn.net/tomatomas/article/details/50442497 原文作者:番茄大圣 创建svg节点时,要使用createElementNS函数 ...

  3. jquery总结06-动画事件03-淡入淡出效果

    .fadeout()淡出 .fadein()淡入 .fadeTaggle()淡入淡出切换 .fadeTo()淡入设定透明度 淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但 ...

  4. angularjs指令系统系列课程（5）：控制器controller

    这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...

  5. Scope 安装和使用

    Scope 安装和使用 一.安装 1. 软件下载 https://sourceforge.net/projects/cscope/files/ 2. 解压 3. 安装 ./configure --pr ...

  6. iOS 工程功能实现之好用的第三方

    1.http://www.cocoachina.com/ios/20140224/7868.html  (一个天气App案例) LBBlurredImage是一个继承自UIImageView,轻而易举 ...

  7. hdu 5596 GTW likes gt

    题目链接: hdu 5596 题意不难懂(虽然我还是看了好久)大概就是说 n 个人排成一列,分成两组, 第 i 秒时第 i 个人会消灭掉前面比他 b[i] 值低的且和他不同组的人,c[i] 表示第 c ...

  8. golang 管道

    2.管道简介Golang的原子并发特性使得它很容易构造流数据管道,这使得Golang可有效的使用I/O和多CPU特性.本文提出一些关于管道的示例,在这个过程中突出了操作失败的微妙之处和介绍处理失败的具 ...

  9. weblogic.security.SecurityInitializationException: Authentication for user weblogic denied（详见下面具体报错信息）

    在使用nodemanager启动受管服务器时,报错 <Dec 25, 2016 5:54:31 PM CST> <Error> <NodeManager> < ...

  10. 使用SQL语句查询每张表的column name

    exec sp_columns tableName 上面这行代码可以查出该表所有的column,改为sp_pkeys,可以查出该表的主键.但是我如果想只查出column name,select COL ...