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 ...
随机推荐
- 关于Windows通过远程桌面訪问Ubuntu
关于Windows通过远程桌面訪问Ubuntu 问题及目标 Window环境通过远程桌面訪问Ubuntu Ubuntu机器端 1. 安装所需软件包 sudoapt-get install xrdp ...
- POJ 3301
开始就是瞄着三分来做的,但看题目,感觉是旋转卡壳吧..可是,用了旋转卡壳还三分条毛啊.. 可以令正方形不旋转,而改为令点绕原点旋转,这样,很好的解决了问题,就可以比较X轴最大长度和Y轴最大长度来确定正 ...
- NOIP2012 同余方程 题解
描写叙述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入仅仅有一行,包括两个正整数a, b,用一个空格隔开. 输出格式 输出仅仅有一行,包括一个正整数x0.即最小 ...
- 怎样通过反编译工具与插件 查看java *.class 文件源代码
Java Decompiler[java 反编译]:开发了反编译工具.能够方便查看*.class 文件源代码.以下介绍几种查看源代码的方式:工具&插件 1.JD-GUI JD-GUI 是显示 ...
- Shell简单介绍
Shell是一种具备特殊功能的程序.它是介于使用者和linux 操作系统之核心程序(kernel)间的一个接口.为什么我们说 shell 是一种介于系统核心程序与使用者间的中介者呢?读过操作系统概论的 ...
- iOS_6_ToolBar+xib+红楼梦
终于效果图 BeyondViewController.h // // BeyondViewController.h // 6_ToolBar // // Created by beyond on 14 ...
- Android recovery UI实现分析
Android recovery模式为何物? 关于这个问题, baidu上已经有无数的答案.不理解的朋友先补习一下. 从纯技术角度来讲, recovery和android本质上是两个独立的rootfs ...
- CentOS 6 安装最新的 Redis 2.8 ，安装 TCMalloc
1,遇到的问题就是 redis 2.8 版本号依赖 Google 的 TCMalloc TCMalloc(Thread-Caching Malloc)是google开发的开源工具──"goo ...
- linux下安装redis3.2
这部分来自网络: http://blog.csdn.net/cuibruce/article/details/53501532 1.下载 下载地址:http://www.redis.io/downlo ...
- ROS安装教程
对于ROS的安装,在它的官方网站: http://wiki.ros.org/ROS/Installation 中也有详细说明.但是对于像博主这样先天英语发育不全的人来说,直接看官网还是有点困难的. 所 ...