焦点图(轮播图)

案例

<!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制作焦点图(轮播图)的更多相关文章

用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
前端框架之jQuery（二）----轮播图,放大镜
事件页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头点击左键切换到上一张图片,但图片为第一张时 ...
jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...

随机推荐

mongo 初始配置
连接mongo 时在window的可视化工具有时会出现这种无法找到表的情况那么我们所需要的是什么?? 用客户端的命令行查看是否能够真正连接成功下载mongo window 并安装这个网 ...
Ajax&XMLHttpRequest
XMLHttpRequest 简单省力的方法将文件编码成base64通过Ajax上传 HTML5学习之FileReader接口 HTML5学习之FileReader接口通过Ajax方式上传文件,使 ...
Intent MIME 打开各种类型的文件
使用 public class MainActivity extends ListActivity { public static final String path = Environmen ...
mybatis的简单使用
使用mybatis数据库时,需要添加一下jar包: asm-3.3.1.jarcglib-2.2.2.jarjavassist-3.17.1-GA.jarlog4j-1.2.17.jarmybatis ...
Sass函数--字符串函数
Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: ● 字符串函数 ● 数字函数 ...
iOS 点击cell下拉
iOS 点击cell下拉代码如下: #import "ViewController.h" @interface ViewController ()<UITableView ...
OC基础 NSDate
OC基础 NSDate #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @auto ...
css控制图片变灰色，彩色
<A href="链接地址"><IMG src="p1.jpg" border="0"></A> < ...
ST表入门学习poj3264 hdu5443 hdu5289 codeforces round #361 div2D
ST算法介绍:[转自http://blog.csdn.net/insistgogo/article/details/9929103] 作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例方 ...
Matlab 取子矩阵
MATLAB如何提取矩阵的子块在matlab中如何提取一个矩阵的部分元素 1.提取大矩阵的一列.一行元素: 一列元素: A(:,j)表示提取A矩阵的第j列全部元素一行元素: A(i,:)表示提 ...

jQuery制作焦点图(轮播图)

焦点图(轮播图)

案例

模仿

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

随机推荐

热门专题