<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">

	*{padding: 0px;margin:0px;}

	.x{margin:30px 30px;text-align: center;}

	.box,.nav-menu{position: relative;}

	.box{width: 1024px;height: 264px;overflow: hidden;zoom: 1;margin:10px auto;}

	.box ul li{ width:100%;

	 position:absolute;

	 height:298px;

	 float:left;

	overflow:hidden;}

	ul li{list-style: none;}

	.nav-menu{left: 950px;bottom: 25px;}

	.nav-menu ul li{float: left;background-color: black;color:#fff;margin-left: 1px;width:20px;height: 20px;}

	.nav-menu .m{color: red; width: 25px;height: 25px;line-height: 24px;margin-top:-3px; border-radius: 25px;}

</style>

<script type="text/javascript">

	$(function(){

		var swidth=$('.box').width();

		var len=$('.box ul li').length;

		var times;

		var index=0;

		$('.nav-menu ul li').click(function(){

			$(this).addClass('m').siblings('li').removeClass('m');

			var index=$(this).index();

			show(index);

		})

		$('.box ul').css('width',swidth*(len));

		$('.box').hover(function(){

			clearInterval(times);

		},function(){

			times=setInterval(function(){

				show(index);

				index++;

				if(index==len){index=0}

			},2000)

		})

		function show(index){

			var lef=-index*swidth;

			//$('.box ul li').stop(true,false).animate({left:lef},1000);

			$('.box ul li').eq(index).fadeIn('slow').siblings('li').fadeOut('slow');

			$('.nav-menu ul li').removeClass('m').eq(index).addClass('m');

		}

	})

</script>

</head>

<body>

      <div class="x">

    	<div class="box">

    		<ul>

    			<li><img src="1.jpg" /></li>

    			<li><img src="2.jpg" /></li>

    			<li><img src="3.jpg" /></li>

    		</ul>

    	</div>

    	<div class="nav-menu">

    		<ul>

    			<li class='m'>1</li>

    			<li>2</li>

    			<li>3</li>

    		</ul>

    	</div>

    </div>

</body>

</html>

　　

jqeury轮播的更多相关文章

  1. jqeury之平移轮播

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

  2. 踩石行动：ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  3. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  4. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  7. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  8. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  9. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

随机推荐

  1. DG - logical standby switchover切换过程

    从11g起,主库和逻辑备库之间切换不再需要关闭任何数据库实例. 1.检查主数据库是否处于考虑切换状态 SQL> select switchover_status from v$database; ...

  2. java中HashSet详解（转）

    HashSet 的实现 对于 HashSet 而言,它是基于 HashMap 实现的,HashSet 底层采用 HashMap 来保存所有元素,因此 HashSet 的实现比较简单,查看 HashSe ...

  3. 0428—Scrum团队成立及《构建之法》第六、七章读后感

    5.Scrum团队成立 5.1 团队名称:喳喳 团队目标:突破渣渣 团队口号:吱吱喳喳 团队照: 5.2 角色分配 产品负责人: 112冯婉莹 Scrum Master:109张鑫相 PM项目经理:1 ...

  4. HTML--表单，图片热点，网页划区和拼接

    一.图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: <img src="/ usemap="longzhu"> ...

  5. C++（VS2012）DLL动态库的生成和调用

    DLL动态链接库的生成: 首先打开VS2012,新建——项目——Win32控制台应用程序(项目名称:ConsoleApplication1)——空项目 新建一个源文件source.cpp 先用控制台e ...

  6. Array.prototype.each

    Array.prototype.each = function(closure){ //递归合并 return this.length ? [closure(this.slice(0,1))].con ...

  7. 自定义FragmentTabHost--实现View重复加载问题

    1,接着上篇的Fragment+FragmentTabHost搭建简单的底部功能切换框架,效果如下: 结果在项目中用到的时候发现Fragment+FragmentTabHost实现的时候每一次切换底部 ...

  8. struts2中的ognl详解,摘抄

    http://blog.csdn.net/tjcyjd/article/details/6850203     很全很细致,自己再分析原理进阶

  9. SQL—— 事务

    SQL 事务: 1.  定义: 事务是作为单个逻辑单元执行的一系列操作. 多个操作作为一个整体向系统提交,要么执行.要么都不执行,事务是一个不可分割的工作逻辑单元.这特别适用于多用户同时操作的数据通信 ...

  10. session_start()一些问题

    session问题集锦 对于PHP的session功能,始终找不到合适的答案,尤其是一些错误,还有一些没有错误的结果,最可怕的就是后者,一直为许多的初学者为难.就连有些老手,有时都被搞得莫名其妙.本文 ...