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" ...
随机推荐
- mysql connector 和 sqlserver ado.net 的区别
1,虽然同样是实现了IDataReader接口,但是 对于 MySql.Data.MySqlClient.MySqlDataReader 和 System.Data.SqlClient.SqlDat ...
- 【转】基于第一个PhoneGap(cordova)的应用详解
PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的 ...
- /etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc
/etc/profile./etc/bashrc.~/.bash_profile.~/.bashrc很容易混淆,他们之间有什么区别?它们的作用到底是什么?/etc/profile: 用来设置系统环境参 ...
- Mybatis 批量更新 ORA-00911: 无效字符的错误
使用<foreach></foreach> 批量insert时报错 ORA-00911: 无效字符的错误 <foreach collection="list&q ...
- linux命令-ssh {远程登录}
一 命令解释 命令: ssh ssh [-l login_name] [-p port] [user@]hostname
- chrome中showModalDialog解决方案
调用myShowModalDialog function myShowModalDialog(url, width, height, callback) { if(window.showModalDi ...
- backtrack下vim的使用
root@bt:~# vim test.c //vim新建或者编辑test.c,执行后进入vim编辑器,按a键进入编辑状态,输入C代码 #include<stdio.h> void mai ...
- linux命令之chmod 2011.11.24转载于网络
使用权限 : 所有使用者 使用方式 : chmod [-cfvR] [--help] [--version] mode file... 说明 : Linux/Unix 的档案调用权限分为三级 : 档案 ...
- Javaweb命名规则
一.类命名命名规范:以大写字母开头,如果有多个单词,每个单词头字母大写.例如:StudentInfo 二.接口命名命名规范:以大写字母"I"开头,如果有多个单词,每个单词头字母大写 ...
- 习课的视频播放器 video.js
jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...