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 ...
随机推荐
- Java 接口技术 Interface
一.什么是接口技术(Interface): //举例中Comparable是一个接口,Employee是一个类 1.接口不是类,而是对类的一组描述,并不给出每个类的具体实现. 2.一个类可以实现多个接 ...
- SSH框架整合截图总结(一)
分页相关属性 --------------------------------------------------------------- 分页思路表单提交(只需传递当前页的值) ->acti ...
- RobotFrameWork+APPIUM实现对安卓APK的自动化测试----第六篇【AppiumLibrary等待函数介绍】
http://blog.csdn.net/deadgrape/article/details/50622441 废话不多说,少年们请看下面. Wait Until Page Contains text ...
- ExtJs之Ext.XTemplate:模板成员函数
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- BA-风阀水阀执行器接线图
220水阀执行器接线图 24V风阀执行器接线图
- [Beginning SharePoint Designer 2010]Chapter4 发布页面
本章概要: 1.SharePoint中的Web内容管理 2.SharePoint发布系统的特性 3.SharePoint发布页面的组成 4.母板页 5.如何构建页面布局和他们潜在的内容类型
- 在IntelliJ IDEA中创建Maven多模块项目
在IntelliJ IDEA中创建Maven多模块项目 1,创建多模块项目选择File>New>Project 出现New Project窗口左侧导航选择Maven,勾选右侧的Create ...
- 假设让我又一次设计一款Android App
转载请注明出处: 本文来自aspook的博客:http://blog.csdn.net/ahence/article/details/47154419 开发工具的选择 开发工具我将选用Android ...
- POJ1274 The Perfect Stall 二分图，匈牙利算法
N头牛,M个畜栏,每头牛仅仅喜欢当中的某几个畜栏,可是一个畜栏仅仅能有一仅仅牛拥有,问最多能够有多少仅仅牛拥有畜栏. 典型的指派型问题,用二分图匹配来做,求最大二分图匹配能够用最大流算法,也能够用匈牙 ...
- windows下PTAM的编译
前些日子在研究PTAM,以下首先说说PTAM的编译过程,我在XP几WIN7搭配vs2010中均已測试过,都能够执行. 首先下载编译PTAM所必须的库文件.下载地址我会给出 PTAM(PTAM.zip) ...