<!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. 在自定义的UINavigationController中设置背景图片

    //这个方法中设置 + (void)initialize { UINavigationBar *bar = [UINavigationBar appearance]; [bar setBackgrou ...

  2. http://codeforces.com/contest/555/problem/B

    比赛时虽然贪了心,不过后面没想到怎么处理和set的排序方法忘了- -,其实是和优先队列的仿函数一样的... 比赛后用set pair过了... #include <bits/stdc++.h&g ...

  3. UI design principles

    Master's conclusion: 1. fix a color pattern 2. fix the frames the UI will use 3. fix the subject tha ...

  4. [转] 国内外最全面和主流的JS框架与WEB UI库（强烈推荐）

    国内外最全面和主流的JS框架与WEB UI库...   当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同 ...

  5. Python学习总结12：sys模块

    sys模块常用来处理Python运行时配置以及资源,从而可以与前当程序之外的系统环境交互. 1. 导入及函数查看 >>> import sys #导入sys模块 >>&g ...

  6. Android--HTTP协议

    1 package com.http.get; 2 3 import java.io.FileOutputStream; 4 import java.io.IOException; 5 import ...

  7. android课程表的实现

    //图片下方的码段主要实现了课程表所要显示的基本布局,采用ondraw的方法. //别的内容可以根据自己兴趣添加,下面是本人做的,仅供参考.                  package com. ...

  8. CCF真题之最大矩形

    201312-3 问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6 ...

  9. linux挂接U盘

    挂接U盘fdisk -lDisk /dev/sdd: 131 MB, 131072000 bytes/dev/sdd1 * 1 889 127983+ b Win95 FAT32#mkdir -p / ...

  10. java 选择排序法

    public class Test3 { /**@author shaobn * @param 选择排序:将a.length - i个元素分别和第i个元素相比较,小的话就将值调换.依次递减进行排列 * ...