<!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. ORA-29857: 表空间中存在域索引和/或次级对象

    今天小编在操作 oracle 数据库,删除表空间时引发了异常!! SQL> drop tablespace nbmap including contents; 为什么会造成以上的异常呢? 根据小 ...

  2. hdu 4607 树形dp 树的直径

    题目大意:给你n个点,n-1条边,将图连成一棵生成树,问你从任意点为起点,走k(k<=n)个点,至少需要走多少距离(每条边的距离是1): 思路:树形dp求树的直径r: a:若k<=r+1 ...

  3. js区分ie不同版本

    方法1  js中 if(window.ActiveXObject)//判断浏览器是否属于IE { var browser=navigator.appName var b_version=navigat ...

  4. 关于excel导入、导出（POI）

    当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际的开发中, ...

  5. I - Agri-Net

    I - Agri-Net poj 1258 注意:多组数据输入. #include<cstdio> #include<cstring> #include<iostream ...

  6. My SQL中show命令--MySQL中帮助查看

    My SQL中show命令--MySQL中帮助查看 学习了:http://hahaxiao.techweb.com.cn/archives/477.html 在mysql命令界面内,输入help或者? ...

  7. [GraphQL] Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

    In this lesson we look at how the Apollo @client directive can be used to fetch client-side state al ...

  8. 串口通讯 ADC0804 数码管

    #include<reg52.h> #include<stdio.h> #include<intrins.h> #define uchar unsigned cha ...

  9. Auto property synthesis will not synthesize property &#39;delegate&#39;; it will be implemented by its super

    今天在XCode6.3上面重写TabBar的时候,自己定义tabBar的代理遇到的一个问题 在重写tabBar的代理的时候遇到了一个警告. 解决方法: 在.m文件里 警告消失

  10. XCODE插件 之 Code Pilot 无鼠标化

    什么是Code Pilot? Code Pilot 是一个 Xcode 5 插件.同意你不许使用鼠标就能高速地查找项目内的文件.方法和标识符. 它使用模糊查询匹配(fuzzy query matchi ...