jQuery制作焦点图(轮播图)
焦点图(轮播图)
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京东轮播效果</title>
<style>
*{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;}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(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);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
模仿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script type="text/javascript" src="packages/jquery-2.1.1.js"></script>
<style type="text/css">
* {
padding: 0;margin: 0;
}
ul {
list-style:none;
}
.out {
width:730px;
height: 454px;
border:5px solid #000;
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:0;
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;
}
</style>
<script type="text/javascript">
$(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;
// alert(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);
})
})
</script>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="使用 jQuery 制作京东网的焦点图/源码/jQuery焦点图轮播/images/6.jpg" alt=""></a></li>
</ul>
<ul class="num">
</ul>
<!-- <ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> -->
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
</body>
</html>
jQuery制作焦点图(轮播图)的更多相关文章
- 用jquery制作的简单轮播图
我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...
- jQuery之制作简单的轮播图效果
[源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
- jQuery实现todo及轮播图
内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...
- jquery tab选项卡、轮播图、无缝滚动
最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...
- 前端框架之jQuery（二）----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- 【jQuery】全功能轮播图的实现（本文结尾也有javascript版）
轮播图 图片自动切换(定时器): 鼠标悬停在图片上图片不切换(清除定时器) 鼠标悬停在按钮上时显示对应的图片(鼠标悬停事件) 鼠标悬停在图片上是现实左右箭头 点击左键切换到上一张图片,但图片为第一张时 ...
- jquery实现漂亮的轮播图
今天工作中要用到一个轮播功能,在网上找了一些,觉得有些过于繁琐,于是自己动手写了一个,效果如图: 代码如下: <!DOCTYPE html> <html lang="en& ...
随机推荐
- thinkphp学习资料
http://www.5idev.com/p-thinkphp_auto_function_callback.shtml
- Linux操作系统分析__破解操作系统的奥秘
学号:SA12226343 姓名:sunhongbo 一.操作系统工作的基础 存储程序计算机和堆栈(函数调用堆栈)机制以及中断机制是操作系统工作的基础. 现代计算机仍采用存储程序计算机的结构体系和工 ...
- Fragement理解
■ 初衷 可重用,碎片化UI,适应大屏幕pad和小屏幕手机 ■ 优点 自行控制加入,移除,交换. activity则由framework深度掌管. 切换流畅 模块化(逻辑上切割处理) 缺点带来额外 ...
- 导出Exexcl类
前台: <%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation=" ...
- ionic开发android app步骤
一.android开发 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装 ...
- js函数知识点
1.即使写成functon a()也是可以调用外面定义的变量的,写(a,b),我估计是为了降低耦合性 2.即使写成function a()也是可以用arguments[a]来默认写了(a,b) 3.在 ...
- 使用“bulk insert ”进行批量插入数据
本文转自csdn中文章,再次感谢他给我们分享. Bulk Insert命令详细 BULK INSERT以用户指定的格式复制一个数据文件至数据库表或视图中.语法: BULK INSERT [ [ 'da ...
- PHP扩展开发(4) - 多类扩展
由于函数和单类的扩展,网上一搜一大片,这里就不再叙述了. 这里特别感谢laruence(鸟哥)开源的yaf扩展,解决困扰我多时的多类问题,还在看他的代码学习中,这里是对多类写法学习的一个阶段总结. ...
- ECSTORE2.0 新增自定义定时任务
在ECsotre系统里面添加一个自定义的定时任务,可以完成一些自动化处理,例如自动确认订单或者是删除无效订单的,可以很方便的实现各种定时执行的任务,下面简单介绍下怎么添加定时任务. 在自己的app目录 ...
- android studio gradle自动签名构建实现
我为自己代言: 一.在android studio中生成签名文件. 1.在android studio 选中项目,在菜单栏中选择Build. 2.点击Generate Signed APK选项卡. 3 ...