使用 jQuery 制作京东网的焦点图
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 制作京东网的焦点图的更多相关文章
- 基于jQuery仿Flash横向切换焦点图
给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自 ...
- 【转载总结】jQuery和HTML5全屏焦点图
选项设置与说明 Slider Revolution提供了很多参数选项设置: delay: 滑动内容停留时间.默认9000毫秒 startheight: 滑动内容高度,默认490像素. startwid ...
- 一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...
- 一款基于jQuery和HTML5全屏焦点图
今天爱编程小编给大家分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏的效果,因此 ...
- 一款基于jQuery的图片左右滑动焦点图
今天给大家分享一款基于jQuery的焦点图插件,这款jQuery焦点图插件的特点是可以多张图片左右滑动切换,可以点击切换按钮进行图片滑动,同时也支持图片自动切换.另外,这款jQuery焦点图是宽屏的, ...
- jQuery自动轮播图片焦点图
在线演示 本地下载
- 用jQuery制作仿网易云课堂导航菜单效果
最近做项目,用到类似的效果. 效果图如下: 直接上代码: HTML: <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
随机推荐
- Ubuntu分区小知识与分区方案
Most PC operating systems still work with an ancient disk partition scheme that historically makes d ...
- codeforces 848A - From Y to Y(构造)
原题链接:http://codeforces.com/problemset/problem/848/A 题意:让我们构造一个字符串.这里有一种操作:取走这个字符串的若干部分,分成两部分,然后将这两部分 ...
- Codechef BINOMSUM
题意:(复制sunset的)有\(T\)天,每天有\(K\)个小时,第\(i\)天有\(D+i−1\)道菜,第一个小时你选择\(L\)道菜吃,接下来每个小时你可以选择吃一道菜或者选择\(A\)个活动中 ...
- python3安装pdfminer并使用
1.python3不同与2版本不能使用pdfminer pip install pdfminer3k 2.使用pdfminer解析相应文档并保存到相应的文件夹中 # encoding : udf-8 ...
- The shortest problem(hdu,多校
The shortest problem Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- window使用
运行命令 regedit #注册表编译器 firewall.cpl #打开防火墙配置 powershell #打开powershell control #打开控制面版 cnpa.cpl #打开网络设置 ...
- SpringBoot 快速构建微服务体系 知识点总结
可以通过http://start.spring.io/构建一个SpringBoot的脚手架项目 一.微服务 1.SpringBoot是一个可使用Java构建微服务的微框架. 2.微服务就是要倡导大家尽 ...
- Unity Shader之模板测试
Unity Shader之模板测试 一沙一世界,一花一天堂 一.Stencil testing 渲染管线 当片段着色器处理完一个片段之后,模板测试(Stencil Test)会开始执行,和深度 ...
- error C2065: ‘_bstr_t’ : undeclared identifier
转自VC错误:http://www.vcerror.com/?p=828 问题描述: error C2065: '_bstr_t' : undeclared identifier 解决方法: 详细的解 ...
- 如何为mysql建立索引
前些时候,一位颇高级的程序员居然问我什么叫做索引,令我感到十分的惊奇,我想这绝不会是沧海一粟,因为有成千上万的开发者(可能大部分是使用MySQL的)都没有受过有关数据库的正规培训,尽管他们都为客户做过 ...