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. HTML5 canvas绘制图形

    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. [BZOJ5407]girls

    也是CF985G... 容斥+三元环计数 CF数据太弱啦 vis没赋初值-1竟然过了QAQ 所以又调了我半个小时才搞掉QAQ 数数真难QAQ 记得要写#include<vector>!!! ...

  3. docker：python与docker

    一:环境准备 pycharm:专业版(windows) docker ce 免费版(ubantu16.04) os: os:防火墙 二:开发流程 pycharm中开发环境搭建的工作原理: 1. pyc ...

  4. python基础：8.正则表达式

    1.概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. re模块的常见方法: ...

  5. python运行windows终端程序

    其实是用python控制windows里的shell 1.windows有PowerShell,可以通过搜索打开,运行python不需要打开shell 2.用python里的subprocess函数, ...

  6. 人生苦短_我用Python_def(函数)_004

    # coding=utf-8 # function函数:内置函数 # 例如: len int extent list range str # print insert append pop rever ...

  7. 数据中 int 转 double 方式

    在mysql 中,得出一个int整数型数值 int整数值/int整数值   在被引用时,发现还是int类型 但是实际需要转换为 double 小数类型 查看相关函数,没有找到好的方法 后采用了 rou ...

  8. LOJ 2978 「THUSCH 2017」杜老师——bitset+线性基+结论

    题目:https://loj.ac/problem/2978 题解:https://www.cnblogs.com/Paul-Guderian/p/10248782.html 第 i 个数的 bits ...

  9. LocalActivityManager如何在一个Activity的一部分中显示其他Activity

    首先要使用该方法,页面必须继承ActivityGroup. 总的来说,实现"如何在一个Activity的一部分中显示其他Activity"除了LocalActivityManage ...

  10. python 字符串str和json格式转换

    最近在写一个脚本,需要处理从excel中读取的数据,发现读取的json格式数据进行转换时报错 ValueError: Expecting property name enclosed in doubl ...