HTML

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>京东</title>

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

		<script type="text/javascript" src="js/test.js" ></script>

		<link rel="stylesheet" href="css/test.css" />

	</head>

	<body>

		<div class="out">

	<ul class="img">

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

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

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

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

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

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

    </ul>

    <ul class="num">

    </ul>

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

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

</div>

	</body>

</html>

　　CSS

*{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;}

　　JS

$(document).ready(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);

	})

})

　效果：

2017-09-22    21:53:08

使用 jQuery 制作京东网的焦点图的更多相关文章

  1. 基于jQuery仿Flash横向切换焦点图

    给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...

  2. 【转载总结】jQuery和HTML5全屏焦点图

    选项设置与说明 Slider Revolution提供了很多参数选项设置: delay: 滑动内容停留时间.默认9000毫秒 startheight: 滑动内容高度,默认490像素. startwid ...

  3. 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...

  4. 一款基于jQuery和HTML5全屏焦点图

    今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...

  5. 一款基于jQuery的图片左右滑动焦点图

    今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...

  6. jQuery自动轮播图片焦点图

    在线演示 本地下载

  7. 用jQuery制作仿网易云课堂导航菜单效果

    最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...

  8. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

随机推荐

  1. Java字节缓冲流和字符缓冲流学习

    1.字节缓冲流 首先要明确一个概念:对文件或其他目标频繁的读写操作,效率低,性能差. 使用缓冲流的好处是,能够高效的读写信息,原理是将数据先缓冲起来,然后一起写入或者读取出来. BufferedInp ...

  2. Excel，此文件中的某些文本格式可能已经更改，因为它已经超出最多允许的字体数。

    既然是超出最多允许的字体数,那么就不要循环创建IFont.先创建一个IFont font=wk.CreateFont();后面都使用它即可.

  3. Python3解leetcode Rotate Array

    问题描述: Given an array, rotate the array to the right by k steps, where k is non-negative. Example 1: ...

  4. POJ 3525 Most Distant Point from the Sea (半平面交)

    Description The main land of Japan called Honshu is an island surrounded by the sea. In such an isla ...

  5. 10.18.2 linux文件压缩与打包

    tar压缩工具 tar 本身为一个打包工具,可以把目录打包成一个文件,它的好处是它把所有文件整合成一个大文件整体,方便拷贝或者移动. 语法:tar [-zjxcvfpP] filename tar 命 ...

  6. Android内存tips

    1. Android应用程序的默认最大内存值为16M,如何修改Android应用程序的默认最大内存值? 修改或添加/system/build.prop中的配置项: root@NX551J:/syste ...

  7. TypeScript：TypeScript 百科

    ylbtech-TypeScript:TypeScript 百科 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类 ...

  8. mysql linux下安装部署

    一.安装简介 用户名:mysql安装目录:/usr/local/mysql-5.5数据库目录:/data/mysql/data源码包:mysql-5.5.28.tar.gz 二.安装准备 a.vi / ...

  9. python 装饰器 第一步：基本函数

    # 第一步:基本函数 def eat(): print('吃饭') # 调用 eat()

  10. 首次使用Git将码云上的代码Clone至本地

    使用Git将码云上的代码Clone至本地 1. 安装Git https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-G ...