<!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常用特效-幻灯片的更多相关文章

  1. [JS]常用特效js插件

     网站一:http://www.superslide2.com/ function set_a_title(n) { var t = $.trim($(n).text()); t && ...

  2. jquery,js常用特效名称

  3. JS常用特效方法总结

    1.按Ctrl提交 <body onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click ...

  4. js常用特效——选项卡效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  6. Js常用技巧

    摘录:http://crasywind.blog.163.com/blog/static/7820316920091011643149/ js 常用技巧 1. on contextmenu=" ...

  7. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  8. js常用工具类.

    一些js的工具类 复制代码 /** * Created by sevennight on 15-1-31. * js常用工具类 */ /** * 方法作用:[格式化时间] * 使用方法 * 示例: * ...

  9. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

随机推荐

  1. 《黑白团团队》第八次团队作业：Alpha冲刺 第四天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第四天 日期:2019/6/18 成员 ...

  2. jQuery(Dom节点操作)

  3. CF449 C. Jzzhu and Apples

    /* http://codeforces.com/problemset/problem/449/C cf 449 C. Jzzhu and Apples 数论+素数+贪心 */ #include &l ...

  4. 洛谷—— P1262 间谍网络

    https://www.luogu.org/problem/show?pid=1262 题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A ...

  5. [BZOJ 3884][欧拉定理]上帝与集合的正确使用方法

    看看我们机房某畸形写的题解:http://blog.csdn.net/sinat_27410769/article/details/46754209 此题为popoQQQ神犇所出,在此orz #inc ...

  6. [SCOI 2009] 生日快乐

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1024 [算法] 直接DFS,即可 [代码] #include<bits/std ...

  7. Python 对象初识

    # Demo1class Penson: animal = 'big mom' plant = 'flower' def __init__(self,name,age,sex,job): self.n ...

  8. 数据库SQL语句错误

      Caused by: android.database.sqlite.SQLiteException: near "where": syntax error(Sqlite co ...

  9. 七牛上图片总是net::ERR_NAME_NOT_RESOLVED

    七牛上图片总是net::ERR_NAME_NOT_RESOLVED >> php这个答案描述的挺清楚的:http://www.goodpm.net/postreply/php/101000 ...

  10. 性能优化实战-join与where条件执行顺序

    昨天经历了一场非常痛苦的性能调优过程,但是收获也是刻骨铭心的,感觉对sql引擎的原理有了进一步认识. 问题起源于测试人员测一个多条件检索的性能时,发现按某个条件查询会特别慢.对应的sql语句简化为: ...