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+selenium自动化遇到confirm弹窗，出现NoAlertPresentException: no alert open
//操作js的confirm弹窗,bool控制是否点击确定,true为点击确定,false为点击取消 public static void OperaterJSOfConfirm(WebDriver ...
- POJ 3243
Babystep算法.具体为什么,我也不太明白,好像资料不多. #include <iostream> #include <cstdio> #include <cstri ...
- PHP--规范化的文件上传
<form action="" method="post" enctype="multipart/form-data"> < ...
- 【数字图像处理】六.MFC空间几何变换之图像平移、镜像、旋转、缩放具体解释
本文主要讲述基于VC++6.0 MFC图像处理的应用知识,主要结合自己大三所学课程<数字图像处理>及课件进行解说,主要通过MFC单文档视图实现显示BMP图片空间几何变换.包含图像平移.图形 ...
- 回车登录（支持IE 和 火狐等浏览器）
$("body").keydown(function(e){ var curKey = e.which; if(curKey == 13){ $("#Btn_login& ...
- Android面试题集
前几天整理了Java面试题集合,今天再来整理下Android相关的面试题集合.假设你希望能得到最新的消息,能够关注https://github.com/closedevice/interview-ab ...
- 构建基于Javascript的移动CMS——生成博客(二).路由
在有了上部分的基础之后.我们就能够生成一个博客的内容--BlogPosts Detail.这样就完毕了我们这个移动CMS的差点儿基本的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情 ...
- [C++设计模式] iterator 迭代器模式
迭代器模式定义:提供一种方法顺序訪问一个聚合对象中各个元素,而又不须要暴露该对象. 迭代器分内部迭代器和外部迭代器.内部迭代器与对象耦合紧密,不推荐使用. 外部迭代器与聚合容器的内部对象松耦合,推荐使 ...
- Shell脚本：推断用户和用户组是否已经存在/创建用户和用户组
通常作为一个应用程序的部署脚本,開始的第一项工作是为当前应用创建一个专用(dedicated)的用户和用户组.这个脚本非常easy.这里贴一个參考样本: #!/bin/sh user=test_use ...
- UVA 10539 - Almost Prime Numbers 素数打表
Almost prime numbers are the non-prime numbers which are divisible by only a single prime number.In ...