js常用特效-幻灯片
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
list-style: none;
} #box {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
margin: auto;
width: 500px;
height: 300px;
} ul>li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
font-size: 40px;
color: #fff;
text-align: center;
line-height: 300px;
display: none;
} .ul li:nth-of-type(1) {
background: red;
} .ul li:nth-of-type(2) {
background: green;
} .ul li:nth-of-type(3) {
background: blue;
} .ul li:nth-of-type(4) {
background: #ff6700;
} span {
font-size: 50px;
font-weight: bold;
display: inline-block;
width: 40px;
color: #fff;
background: #b0b0b0;
height: 60px;
line-height: 60px;
text-align: center;
cursor: pointer;
display: none;
} #box:hover span {
display: block;
} .left {
position: absolute;
left: 0px;
top: 120px;
} .right {
position: absolute;
right: 0px;
top: 120px;
} ol {
text-align: center;
position: absolute;
bottom: 20px;
width: 100%;
} ol>li {
display: inline-block;
width: 15px;
height: 15px;
background: gray;
border-radius: 100%;
margin: 5px;
cursor: pointer;
}
.show {
display: block;
}
.change {
background-color: #fff;
}
</style>
</head>
<body>
<div id="box">
<ul class="ul">
<li>第一张</li>
<li>第二张</li>
<li>第三张</li>
<li>第四张</li>
</ul>
<ol>
<li class="point"></li>
<li class="point"></li>
<li class="point"></li>
<li class="point"></li>
</ol>
<span class="left"><</span>
<span class="right">></span>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var box = document.querySelector("#box");
var ul = document.querySelector(".ul");
var lis = ul.getElementsByTagName("li");
var right = document.querySelector(".right");
var left = document.querySelector(".left");
var point = document.querySelectorAll(".point"); lis[0].className = "show";
point[0].className = "change";
var i = 0, timer; //自动播放 Auto();
function Auto() {
if(timer){
clearInterval(timer);
}
function show() {
i++;
if(i >= lis.length) {
i = 0
}
clear(i);
}
timer = setInterval(show, 1500);
} //单击左边
left.onclick = function() {
i--;
if(i < 0) {
i = lis.length - 1;
}
console.log(i);
clear(i);
} //单击右边
right.onclick = function() {
i++;
if(i >= lis.length) {
i = 0;
}
clear(i);
}
//重置属性
function clear(t) {
for(var j = 0; j < lis.length; j++) {
lis[j].className = "";
point[j].className = "";
}
lis[t].className = "show";
point[t].className = "change";
}
//单击小圆圈播放 (注意函数的闭包问题 )
for(var k = 0; k < point.length; k++) {
point[k].index = k; //闭包问题的解决，自定义属性
point[k].onclick = function() {
i = this.index;
clear(i);
}
} box.onmouseenter = function(){
clearInterval(timer);
}
box.onmouseleave = function(){
setTimeout(Auto, 1000);
}
js常用特效-幻灯片的更多相关文章
- [JS]常用特效js插件
网站一:http://www.superslide2.com/ function set_a_title(n) { var t = $.trim($(n).text()); t && ...
- jquery,js常用特效名称
- JS常用特效方法总结
1.按Ctrl提交 <body onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click ...
- js常用特效——选项卡效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- Js常用技巧
摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...
- Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）
Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...
- js常用工具类.
一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...
- 未封装的js放大镜特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
随机推荐
- FreeMarker 语法 访问 pojo 的属性
一.java 代码 @Test public void testFreeMarker() throws Exception { //1.创建一个模板文件 //2.创建一个Configuration对象 ...
- 2015 Multi-University Training Contest 6 hdu 5357 Easy Sequence
Easy Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- hdu 2491 贪心
#include<stdio.h> #include<stdlib.h> #define N 110000 struct node { int u,v,len,time; }m ...
- Ajax-URL 防止数据缓存,添加时间戳
url:CONTEXTPATH + "/dataService/getSourceStatics?type=0&t="+new Date().getTime(),
- 数据库连接池dataesoruce pool深入理解
8.数据库连接池的connection都是长连接的,以方便多次调用,多人连续使用.dataSourcePool9.数据库连接池中的连接,是在你用完之后,返回给数据库连接池的,并不是close()掉,而 ...
- HDU 4351
求某区间各个子集的和的根的最大的五个数. 子集根其实就是这个数模9后的余数,注意的是要区分0和9,两者的余数都是0.. 记录前i个数的和的根,设为sum数组,然后处理两个数组 lft[i][j]表示从 ...
- CSU 1541 There is No Alternative （最小生成树+枚举）
题目链接:传送门 题意: 有n个点.m条边.要使n个点所有连起来且要花费最小.问有哪些边是必需要连的. 分析: 要使花费最小肯定是做最小生成树.可是题目要求哪些边是必需要用的.我们能够 这样思考,我们 ...
- Xcode6 引入第三方静态库project的方法
首先.介绍一下把在当前project中引入其它依赖project的方法: 第一:把其它项目project加入到现有project做法: 定义: FPro 现有project ＝＝ 父project C ...
- wifi破解不是真黑客不靠谱？
Wifi破解神器骗局:摆地摊+网络兜售 近日,"万能wifipassword破解器"风靡全国地摊.各地小贩開始兜售这样的蹭网卡.声称可破解各种wifipassword,当场測试也是 ...
- hdoj--2069--Coin Change（动态规划）
Coin Change Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...