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 ...
随机推荐
- Emgu cv人脸检测识别
Emgu cv人脸检测识别 1.开发平台:WIN10 X64 VS2012 Emgucv版本:3.1 2.先给大家分享一个官网给的示例源代码: https://ncu.dl.sourcef ...
- 操作符及SQL函数
本节要点: 掌握 SQL 操作符 l 算术操作符 l 比较操作符 l 逻辑操作符 l 集合操作符 l 连接操作符 l 操作符的优先级 掌握并熟练应用SQL 函数 l 日期函数 l 字符 ...
- 敏捷开发-srcum
SCRUM框架包括3个角色.3个工件.5个活动.5个价值 3个角色 1.产品负责人(Product Owner) 2.Scrum Master 3.Scrum团队 3个工具 1.Product Bac ...
- [SharePoint][SharePoint Designer 入门经典]Chapter12 高级工作流
1.使用Visio2010创建工作流标志 2.使用Visio Graphic服务可视化一个运行的工作流 3.使用InfoPath2010修饰工作流表单 4.导出可重用的工作流
- HTML5 格式化方式以及应用
<b>加粗字体 <big>定义大号字体 <em>定义着重文字 <i>定义斜体字 <small>定义小号字体 <strong>定义 ...
- 剑指offer——06旋转数组的最小数字（Python3）
题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...
- MySQL8.0修改临时密码
解决MySQL8.0报错:Unknown system variable 'validate_password_policy' 一.问题描述 1.在安装MySQL8.0时,修改临时密码,因密码过于简单 ...
- unwrap
node.replaceWith(...node.childNodes);
- 苹果操作系统名称演变史 新名称macOS
历史回顾 发布年代 名称 序号 1994-1999 Classic Mac OS 1-9 2001-2011 Mac OS X 10.0-Lion 2012-2015 OS X Mountain Li ...
- Unity 指定区域随机实例化预制体Prefab 代码
using UnityEngine; public class NewBehaviourScript : MonoBehaviour { public GameObject prefab; void ...