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 NIO学习（Path接口、Paths和Files工具类的使用）

    NIO学习:Paths和Files工具类的使用 JDK1.7引入了新的IO操作类.在java.nio.file包下,Java NIO Path接口和Files类. Path接口:Path表示的是一个目 ...

  2. Java对象流与序列化学习

    对象流与序列化 对象流有两个类 ObjectOutputStream:将java对象的基本数据类型和图形写入OutputStream ObjectInputStream:对以前使用ObjectOutp ...

  3. hadoop通过java输出HAFS上的文件内容

    package org.apache.hadoop.book;import java.io.InputStream;import java.net.URL;import org.apache.hado ...

  4. Halo（十）

    Spring Converter(转换器) @FunctionalInterface public interface Converter<S, T> { //一对一转换 @Nullabl ...

  5. 【Eureka】实现原理

    Eureka Client 拉取Eureka Server中的全量注册表 注册自身实例InstanceInfo至Eureka Server 初始化定时任务 心跳(续约)任务 拉取增量注册表更新本地注册 ...

  6. Angular JS - 7 - Angular JS 常用指令2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. spring boot jar的支持

  8. 【BZOJ2946&SPOJ1812】公共串（后缀自动机）

    题意:给出几个由小写字母构成的单词,求它们最长的公共子串的长度. 单词的数量<=5,单词的长度至少为1,最大为2000. 思路: #include<bits/stdc++.h> us ...

  9. 数据中 int 转 double 方式

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

  10. 数据挖掘之DecisionTreeClassifier决策树

    用决策树DecisionTreeClassifier的数据挖掘算法来通过三个参数,Pclass,Sex,Age,三个参数来求取乘客的获救率. 分为三大步: 一,创建决策树DecisionTreeCla ...