jquery实现幻灯片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gakki</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
position: relative;
width: 100%;
height: 100%;
}
#wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 512px;
height: 384px;
}
#wrap .inner{
width: 100%;
height: 100%;
cursor: pointer;
}
#wrap .bgPicture{
width: 100%;
height: 100%;
background: url('http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg') 50% 50% no-repeat;
}
#wrap .pic{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
#wrap .pic .inner{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
list-style: none;
}
#wrap .icon{
position: absolute;
left: 50%;
top: 90%;
transform: translate(-50%, -50%);
height: 18px;
line-height: 18px;
}
#wrap .icon span{
display: inline-block;
width: 10px;
height: 10px; /*不知道为什么span和span之间有8px间距*/
border-radius: 50%;
border: 1px solid #d67ed6;
z-index: 2;
}
#wrap .icon span:hover{
background-color: #d67ed6;
opacity: 0.2;
filter: alpha(opacity=20);
}
#wrap .icon span.active{
background-color: #d67ed6;
opacity: 0.6;
filter: alpha(opacity=60);
height: 15px;
border-radius: 30%;
}
#wrap .arrow{
position: absolute;
width: 30px;
height: 50px;
background-color: rgba(150,150,150,0.5);
border-radius: 5px;
text-align: center;
line-height: 50px;
font-size: 22px;
font-weight: bold;
color: #fff;
z-index: 2;
}
#wrap .arrow:hover{
background-color: rgba(150,150,150,0.7);
color: #ddd;
}
#wrap .pre{
left: 1%;
top: 50%;
transform: translateY(-50%);
}
#wrap .next{
right: 1%;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<div class="bgPicture"></div>
<div class="pic">
<a href="http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html" target="_blank"><div class="inner"></div></a>
</ul>
<div class="icon">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="arrow pre"><</div>
<div class="arrow next">></div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var n = 0;
var $wrap = $("#wrap"),
$btn = $wrap.find('.icon>span'),
$bgPic = $wrap.find('.bgPicture'),
$link = $wrap.find('.pic a');
var url = ["http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg"],
href = ["http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html","http://www.qdfuns.com/notes/27497/97b77870e523299cbf2be9ebf6023e00.html","http://www.qdfuns.com/notes/27497/d158ce3e48cd86b2d2ab5182ca65b7ad.html","http://www.qdfuns.com/notes/27497/7ec7ce8bcc074fe3c721b59cfcf7cb52.html","http://www.qdfuns.com/notes/27497/1b763c1383ac0d2a1f3927557379b63b.html"];
/*span按钮的函数&调用picFade函数*/
function slide(){
n = n>=$btn.length-1?0:++n;
$btn.eq(n)
.siblings().removeClass('active')
.end().addClass('active');
picFade();
}
/*封装图片淡入淡出函数*/
function picFade(){
var curHref = href[n];
var curUrl = url[n];
$bgPic.fadeTo('slow', 0.4, function() {
$bgPic.css('background-image', 'url("'+curUrl+'")')
.fadeTo('slow', 1, function(){
$link.attr('href', curHref);
});
});
}
/*自动轮播*/
var timer = setInterval(slide, 5000);
/*小按钮绑定点击事件*/
$btn.on('click', function(event) {
clearInterval(timer);
n = $(this).index()-1;
slide();
timer = setInterval(slide, 5000);
});
/*向前前后按钮绑定事件*/
$wrap.find('.arrow').on('click', function(event) {
if (!$bgPic.is(':animated')) {
clearInterval(timer);
n = $(this).hasClass('pre')?n-2:n;
if (n<0) {n=n+5}
slide();
timer = setInterval(slide, 5000);
}
});
});
</script>
</body>
</html>
jquery实现幻灯片的更多相关文章
- 一款经典的jQuery slidizle 幻灯片
jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...
- Jquery Slick幻灯片插件
slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- jquery bxslider幻灯片样式改造
找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...
- 经典的一款jQuery soChange幻灯片
soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...
- jQuery orbit 幻灯片
在线实例 默认 带缩略图 带描述 使用方法 <div class="wrap" style="width: 565px; height: 290px; margin ...
- 【jquery】幻灯片效果
闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...
- jQuery Flickerplate 幻灯片
Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb.它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备 在线实例 默认 圆点导航位置 动画方式 深色主题 H ...
- 经典实用jQuery soChange幻灯片实例演示
soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...
随机推荐
- 由于C++编译器的分析机制所导致的声明问题
假设我们想声明一个STL的vector类型的变量,读入文件里的信息: std::ifstream in("data.txt"); std::vector<int> da ...
- Flask最佳实践
https://zhuanlan.zhihu.com/p/22774028?refer=python-cn
- ORACLE10gRAC数据库迁移至10gRAC
1.数据库备份RUN {ALLOCATE CHANNEL ch00 DEVICE TYPE disk;ALLOCATE CHANNEL ch01 DEVICE TYPE disk;ALLOCATE C ...
- system verilog中的跳转操作
在verilog中,使用disable声明来从执行流程中的某一点跳转到另一点.特别地,disable声明使执行流程跳转到标注名字的声明组末尾,或者一个任务的末尾. verilog中的disable命令 ...
- Sqlserver 自定义表类型定义，使用，删除
--创建用户自定义表类型CREATE TYPE dbo.CustomerTable AS TABLE ( Id int NOT NULL, Name char(10) NULL, PRIMARY KE ...
- AX7: CREATE AN AUTOMATED TEST PACKAGE\MODEL
AX7: CREATE AN AUTOMATED TEST PACKAGE\MODEL It’s really important for a stable solution the use of a ...
- spring 定时器Quartz
一.Quartz是什么 二. 核心接口 scheduler --- 核心调度器 Job --- 任务 JobDetail --- 任务描述 Tigger --- 触发器 三 . 核心接口之间 ...
- CSS3学习笔记1-选择器和新增属性
前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...
- 部署samba服务之后，在客户端用挂载访问的方式，错误信息：mount: block device //192.168.1.108/mysqldata is write-protected, mounting read-only mount: cannot mount block device //192.168.1.108/mysqldata read-only
部署samba服务之后,在客户端用挂载访问的方式,错误信息:mount: block device //192.168.1.108/mysqldata is write-protected, moun ...
- GPIB：永远不会被淘汰 (转载）
发布时间:2014-07-02 来源:www.china-igbt.com 1994年5月出版的<测试与测量世界>中刊登了我冒险撰写的一篇名为<GPIB,时刻保持警惕>的 ...