<!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. jQuery:多个AJAX/JSON请求对应单个回调并行加载

    因为我们使用jQuery,这意味着需要调用 jQuery.getScript 和 jQuery.getJSON 函数. 我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回, ...

  2. tcpdump note

    from http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html 用简单的话来定义tcpdump,就是:dump the tr ...

  3. SpringMVC注解@RequestParam全面解析

    在SpringMVC后台控制层获取参数的方式主要有两种,一种是request.getParameter("name"),另外一种是用注解@RequestParam直接获取.这里主要 ...

  4. 算法训练 Anagrams问题

    http://lx.lanqiao.org/problem.page?gpid=T223 算法训练 Anagrams问题   时间限制:1.0s   内存限制:512.0MB      问题描述 An ...

  5. CCF真题之命令行选项

    201403-3 问题描述 请你写一个命令行分析程序,用以分析给定的命令行里包含哪些选项.每个命令行由若干个字符串组成,它们之间恰好由一个空格分隔.这些字符串中的第一个为该命令行工具的名字,由小写字母 ...

  6. Android 播放视频文件

    package com.example.myvideo2; import java.io.File; import android.app.Activity; import android.net.U ...

  7. 静态关键字static

    //静态关键字的使用static //类里面的普通成员是属于对象的,不是属于类的(调用的时候是用对象调用) //什么叫做静态的:类静态成员是属于类的,不是属于每个对象的 //定义静态成员用static ...

  8. 编译php时的一个脚本

    ./configure --prefix=/usr/local/php \ --with-curl \ --with-freetype-dir \ --with-gd \ --with-gettext ...

  9. 《zw版·ddelphi与halcon系列原创教程》Halcon的短板与delphi

    [<zw版·delphi与Halcon系列原创教程>Halcon的短板与delphi 看过<delphi与Halcon系列>blog的网友都知道,笔者对Halcon一直是非常推 ...

  10. string与char之间的互相转换

    string对象是一种很强大的存在哈~~ 1. string转const char* string s = "abc"; const char* c_s = s.c_str(); ...