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. 在linux终端中清空文件

    cat /dev/null > file_name vim file_name 把文件的前10行拷贝到新的文件中 head -n10 file_name1 > file_name2

  2. Morphia开发简介

    1. 什么是Morphia Morphia是一个开放源代码的对象关系映射框架,它对MongoDB数据库 java版驱动进行了非常轻量级的对象封装,使得Java程序员可以随心所欲的使用对象编程思维来操纵 ...

  3. tensorflow的boolean_mask函数

    在mask中定义true,保留与其进行运算的tensor里的部分内容,相当于投影的功能. mask与tensor的维度可以不相同的,但是对应的长度一定要相同,也就是要有一一对应的部分: 结果的维度 = ...

  4. Python常用内置函数整理（lambda，reduce，zip，filter，map）

    匿名函数lambda lambda argument1,argument2,...argumentN :expression using arguments 1.lambda是一个表达式,而不是一个语 ...

  5. iis7反向代理

    很多站长通常在Linux系统下使用nginx作为前端server,通过反向代理间接访问其他webserver.那么如果用户安装的是Windows系统的话,又改如何实现反向代理的设置呢?搜索引擎大全 下 ...

  6. c# 如何获取系统管理员权限（UAC） 及判断当前是否是管理员权限

    环境说明: VS2012,windows 7  亲自验证过win7 和xp ,XP直接不弹框,因为XP没有UAC控制机制 步骤1: 右键项目-->属性-->安全性-->选中[启用Cl ...

  7. Equivalent Prefixes

    题目链接 题意:给你两个数组a,b,大小为n,让你寻找一个数p (1<= p <= n) ,使之在 1~p 任意一个区间中a,b数组的最小值下标相同. 思路:看到用线段树去写的我也是服了. ...

  8. YII 1.0 常用CURD写法

    <?php //yii1.0 curd简单写法 //查询 Yii::app()->db->createCommand($sql)->queryAll();//查询所有行数据 ​ ...

  9. （选做）实现mypwd

    选做 实现mypwd 实验内容: 1.学习pwd命令. 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码. 3.实现mypwd. 4.测试mypwd. 实验步骤: 学习pwd命 ...

  10. MySQL按首字母查询

    DELIMITER $$ CREATE /*[DEFINER = { user | CURRENT_USER }]*/ ))) CHARSET utf8 BEGIN ); ); )); SET V_R ...