<!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. 00068_Date类

    1.类Date表示特定的瞬间,精确到毫秒: 2.查阅Date类的描述,发现Date拥有多个构造函数,只是部分已经过时,但是其中有未过时的构造函数可以把毫秒值转成日期对象: //创建日期对象,把当前的毫 ...

  2. 【codeforces 731D】80-th Level Archeology

    [题目链接]:http://codeforces.com/contest/731/problem/D [题意] 给你n个象形文; 每个象形文由l[i]个数字组成; 你可以把所有的组成象形文的数字同时增 ...

  3. C++ decltype类型说明符

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50865552 1 基本语法 declt ...

  4. HDU5514 Frogs

    /* HDU5514 Frogs http://acm.hdu.edu.cn/showproblem.php?pid=5514 容斥原理 * * */ #include <cstdio> ...

  5. ASP.NET--identity笔记及截图

    aspnetUsers aspnetRoles aspnetUserroles aspnetUserClaims 存储用户user额外信息的键值对 aspnetUserLogins 第三方登陆的控件 ...

  6. A - Jungle Roads

    A - Jungle Roads 思路:并查集的板子,重点是字符的转换,不能忘了加上1. #include<cmath> #include<cstdio> #include&l ...

  7. CF49A Sleuth

    CF49A Sleuth 题目描述 Vasya plays the sleuth with his friends. The rules of the game are as follows: tho ...

  8. socketpair和pipe的区别

    http://blog.csdn.net/bingqingsuimeng/article/details/9055499 管道pipe是半双工的,pipe两次才能实现全双工,使得代码复杂.socket ...

  9. HDU 3342 -- Legal or Not【裸拓扑排序 &amp;&amp;水题 &amp;&amp; 邻接表实现】

    Legal or Not Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  10. hdu 4717 The Moving Points（三分）

    http://acm.hdu.edu.cn/showproblem.php?pid=4717 大致题意:给出每一个点的坐标以及每一个点移动的速度和方向. 问在那一时刻点集中最远的距离在全部时刻的最远距 ...