<!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. Java基础之处理事件——应用程序中的语义事件监听器（Sketcher 5 with element color listeners）

    控制台程序. 为了标识元素的类型,可以为菜单已提供的4中元素定义常量,用作ID.这有助于执行菜单项监听器的操作,还提供了一种标识颜色类型的方式.我们会累积许多应用程序范围的常量,所以把它们定义为可以静 ...

  2. [原创]java WEB学习笔记77：Hibernate学习之路---Hibernate 版本 helloword 与 解析，.环境搭建，hibernate.cfg.xml文件及参数说明，持久化类，对象-关系映射文件.hbm.xml，Hibernate API (Configuration 类,SessionFactory 接口,Session 接口,Transaction(事务))

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. [原创]java WEB学习笔记50：文件上传案例

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  4. 使用javabeen的好处

    什么是javabeen? javaBean在MVC设计模型中是model,又称模型层, 在一般的程序中,我们称它为数据层, 就是用来设置数据的属性和一些行为,然后提供获取属性和设置属性的get/set ...

  5. java中从Spring、Hibernate和Struts框架的action、service和dao三层结构异常处理体系设计

    Spring的事务实现采用基于AOP的拦截器来实现,如果没有在事务配置的时候注明回滚的checked exception,那么只有在发生了unchecked exception的时候,才会进行事务回滚 ...

  6. react绑定事件

    1.显示隐藏 2.输入框输入内容,立即显示出来 代码如下: 注意:版本 React v15.0.1 ReactDOM v15.0.1 browser.min.js是编译文件,将代码解析为浏览器识别的j ...

  7. sql set xact_abort on 用例

    set xact_abort on 设置事务回滚的当为ON时,如果你存储中的某个地方出了问题,整个事务中的语句都会回滚为OFF时,只回滚错误的地方 例子 : ALTER proc [dbo].[BuC ...

  8. oracle的系统文件的查询

    1:查看实例和数据库的相关信息 --查看实例 select instance_name,version,status,archiver,database_status from v$instance; ...

  9. HGE引擎之hgeSprite

    一.hgeSprite类 hgeSprite是一个精灵实体的HGE帮助类. 1.构造函数 创建和初始化一个hgeSprite对象. hgeSprite(HTEXTURE tex, float x, f ...

  10. Angularjs之基本概念梳理（一）

    1.Angularjs指令属性ng-app和ng-controller的理解 ng-app指令-标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个< ...