<!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. MVC 自定义过滤器/特性来实现登录授权及验证

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    最近在做自学MVC,遇到的问题很多,索性一点点总结 ...

  2. 解决webApi<Message>An error has occurred.</Message>不能写多个Get方法的问题

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.     本人最近在研究C#webAPI相关知识,发现webAPI不能够支持 ...

  3. Java基础之处理事件——添加菜单图标（Sketcher 8 with toolbar buttons and menu icons）

    控制台程序. 要为菜单项添加图标以补充工具栏图标,只需要在创建菜单项的Action对象中添加IconImage对象,作为SMALL_ICON键的值即可. // Defines application ...

  4. keil 编译的一些错误

    以前使用的是MDK4.5 但是没有stm32F3的元器件,果断的使用了4.6版本了.但是编译之后出现这样错误:linking....\Obj\prj.axf: Warning: L6373W: lib ...

  5. Python学习总结13：os模块

    os模块包含普遍的操作系统功能,与具体的平台无关.常用于处理文件和目录这些我们日常手动需要做的操作. 1. os模块函数汇总 1) os.name():判断现在正在实用的平台,Windows 返回 ‘ ...

  6. spark on mesos 两种运行模式

    spark on mesos 有粗粒度(coarse-grained)和细粒度(fine-grained)两种运行模式,细粒度模式在spark2.0后开始弃用. 细粒度模式 优点 spark默认运行的 ...

  7. cmd进入某个目录

    love you my pig java枚举类 cmd进入某个目录 2011-04-06 15:49:38| 分类: 小知识 | 标签: |字号大中小 订阅     1.开始->运行->C ...

  8. paper 21 ：Libsvm的安装和使用

    看了很多资料(包括我们实验室群里师兄上传的资料),算是掌握了libsvm的正确安装和使用,把结果告诉大家以方便以后使用. 1. 参考网站: libsvm库下载:http://www.csie.ntu. ...

  9. Creating Directives that Communicate

    <my-tabs> <my-pane title="Hello"> <h4>Hello</h4> <p>Lorem ip ...

  10. sql 中的回车和换行问题

    --移除回车符 update master_locationSET street_number = REPLACE(street_number, CHAR(13), '') --移除换行符 updat ...