焦点图(轮播图)

案例

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>京东轮播效果</title>

<style>

*{padding:0; margin:0;}

ul{ list-style:none;}

.out{ width:730px; height:454px;  margin:50px auto; position:relative;}

.out .img li{ position:absolute; top:0;left:0; display:none;}

.out .num{ position:absolute; bottom:20px;left:0; font-size:0px; text-align:center; width:100%;}

.out .num li{ width:20px; height:20px; background:#666; color:#fff; text-align:center; line-height:20px; border-radius:50%; display:inline-block; font-size:16px; margin:0 3px; cursor:pointer;}

.out .num li.active{ background:#a00}

.out .btn{ position:absolute; top:50%; margin-top:-30px;width:30px; height:60px; background:rgba(0,0,0,0.5); color:#fff; text-align:center; line-height:60px; font-size:40px; display:none; cursor:pointer;}

.out:hover .btn{ display:block;}

.out .left{ left:0}

.out .right{ right:0;}

</style>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

	//代码初始化

	var size=$(".img li").size();

	for(var i=1; i<=size; i++){

		var li="<li>"+i+"</li>";

		$(".num").append(li);

	}

	//手动控制轮播图

	$(".img li").eq(0).show();

	$(".num li").eq(0).addClass("active");

	$(".num li").mouseover(function(){

		$(this).addClass("active").siblings().removeClass("active");

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

		i=index;

		$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);

	})

	//自动轮播

	var i=0;

	var t=setInterval(move,1500);

	//核心向左运动函数

	function moveL(){

		i--;

		if(i==-1){

			i=size-1;

		}

		$(".num li").eq(i).addClass("active").siblings().removeClass("active");

		$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

	}

	//核心向右运动函数

	function move(){

		i++;

		if(i==size){

			i=0;

		}

		$(".num li").eq(i).addClass("active").siblings().removeClass("active");

		$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

	}

	//左边按钮点击事件

	$(".out .left").click(function(){

		moveL();

	})

	//右边按钮点击事件

	$(".out .right").click(function(){

		move()

	})

	//定时器的开始于结束

	$(".out").hover(function(){

		clearInterval(t)

	},function(){

		t=setInterval(move,1500);

	})

})

</script>

</head>

<body>

<div class="out">

	<ul class="img">

    	<li><a href="#"><img src="images/1.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>

        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>

    </ul>

    <ul class="num">

    </ul>

    <div class="left btn"><</div>

    <div class="right btn">></div>

</div>

</body>

</html>

模仿

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>轮播图</title>

	<script type="text/javascript" src="packages/jquery-2.1.1.js"></script>

	<style type="text/css">

	* {

		padding: 0;margin: 0;

	}

	ul {

		list-style:none;

	}

	.out {

		width:730px;

		height: 454px;

		border:5px solid #000;

		margin:50px auto;

		position: relative;

	}

	.out .img li {

		position:absolute;

		top:0;

		left:0;

		display:none;

	}

	.out .num {

		position: absolute;

		bottom:20px;

		left:0;

		font-size:0;

		text-align: center;

		width:100%;

	}

	.out .num li{

		width:20px;

		height: 20px;

		background: #666;

		color:#fff;

		text-align: center;

		line-height: 20px;

		border-radius: 50%;

		display:inline-block;

		font-size:16px;

		margin:0 3px;

		cursor:pointer;

	}

	.out .num li.active {

		background: #a00;

	}

	.out .btn {

		position: absolute;

		top: 50%;

		margin-top:-30px;

		width:30px;

		height: 60px;

		background:rgba(0,0,0,0.5);

		color:#fff;

		text-align: center;

		line-height: 60px;

		font-size:40px;

		display: none;

		cursor:pointer;

	}

	.out:hover .btn {

		display: block;

	}

	.out .left {

		left:0;

	}

	.out .right {

		right:0;

	}

	</style>

	<script type="text/javascript">

	$(function(){

		//代码初始化

		var size = $(".img li").size();

		for(var i=1;i<=size;i++){

			var li = "<li>"+i+"</li>";

			$(".num").append(li);

		}

		//手动控制轮播

		$(".img li").eq(0).show();

		$(".num li").eq(0).addClass("active");

		$(".num li").mouseover(function(){

			$(this).addClass("active").siblings().removeClass("active");

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

			i=index;

			// alert(index);

			$(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);

		})

		//自动控制轮播

		var i=0;

		var t = setInterval(move,1500);

		//核心向左运动函数

		function moveL(){

			i--;

			if(i==-1){

				i=size-1;

			}

			$(".num li").eq(i).addClass("active").siblings().removeClass("active");

			$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300)

		}

		//核心向右运动函数

		function move(){

			i++;

			if(i==size){

				i=0;

			}

			$(".num li").eq(i).addClass("active").siblings().removeClass("active");

			$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);

		}

		//左边按钮点击事件

		$(".out .left").click(function(){

			moveL();

		})

		//右边按钮点击事件

		$(".out .right").click(function(){

			move();

		})

		//定时器的开始于结束

		$(".out").hover(function(){

			clearInterval(t);

		},function(){

			t = setInterval(move,1500);

		})

	})

	</script>

</head>

<body>

<div class="out">

	<ul class="img">

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/1.jpg" alt=""></a></li>

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/2.jpg" alt=""></a></li>

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/3.jpg" alt=""></a></li>

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/4.jpg" alt=""></a></li>

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/5.jpg" alt=""></a></li>

		<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/6.jpg" alt=""></a></li>

	</ul>

	<ul class="num">

	</ul>

	<!-- <ul class="num">

		<li class="active">1</li>

		<li>2</li>

		<li>3</li>

		<li>4</li>

		<li>5</li>

	</ul> -->

	<div class="left btn"><</div>

	<div class="right btn">></div>

</div>

</body>

</html>

jQuery制作焦点图(轮播图)的更多相关文章

  1. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  2. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  3. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  6. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  7. 前端框架之jQuery（二）----轮播图,放大镜

    事件 页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.   $(document).ready(function(){}) -----------> ...

  8. 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）

    轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...

  9. jquery实现漂亮的轮播图

    今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. linux stat命令

    在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...

  2. [serverlet][转载: 深入理解HTTP Session]

    [serverlet][转载: 深入理解HTTP Session] 标签(空格分隔): 未分类 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任. ...

  3. javaScrip中的“？”

    例如window.location.href="./user/userUpdate?id="+id; 在这里“?”是传入参数或是带个参数id,这样就可以获得到主键了. String ...

  4. ListView自定义滑动条

    /** * 修改默认滑动条 */ private void SetSliderIcon() { try { Field f = AbsListView.class.getDeclaredField(& ...

  5. 使用Uploadify 时，同时使用了jQuery.Validition 验证控件时，在IE11上出现JS缺少对象错误。

    场景: 使用jQuery.1.8.2 使用 Uploadify 3.2上传控件 使用jQuery.Validition 1.9 验证 使用IE 11 时,当鼠标点击上传按钮时,会出现JS 缺少对象错误 ...

  6. Playground

    题意 :求被两点分割的凸包面积的较小值    题意已经给出顺时针啦 就是求以某一个点 和其他所有相邻点组成三角形的面积,然后sum存和求两点的时候就求出那两点的之间所有三角形的和再减掉0点和那两点的面 ...

  7. UVA 1344 Tian Ji -- The Horse Racing

    Tian Ji -- The Horse Racing Here is a famous story in Chinese history. That was about 2300 years ago ...

  8. 出现并解决Navicat 报错:1130-host ... is not allowed to connect to this MySql server,MySQL

    例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话. GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY ...

  9. Hadoop学习历程（三、第一个程序）

    根据之前的操作,我们已经可以正常的启动Hadoop了,关于真正的集群我会在之后进行说明.现在我们来看一下第一个程序吧 1. 在eclipse上建立一个java项目 2. 将 /usr/hadoop/s ...

  10. 同时处理html+js+jquery+css的插件安装（Spket&Aptana插件安装）

    Spket 在线安装方法:Help->Software Updates(或者Install New Software)->Add site Location:http://www.spke ...