<!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. Oracle中Cursor介绍和使用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MyDreamNeverstop/article/details/78604033 一  概念  游标 ...

  2. crm高速开发之Entity

    我们在后台代码里面操作Entity的时候,基本上是这样写的: /* 创建者:菜刀居士的博客  * 创建日期:2014年07月5号  */ namespace Net.CRM.Entity {     ...

  3. 为屏而生，为屏而死 － IT &quot;精英”们的杯与具

    为屏而生,为屏而死 - IT "精英"们的杯与具 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一 ...

  4. java 顺序 读写 Properties 配置文件 支持中文 不乱码

    java 顺序 读写 Properties 配置文件 ,java默认提供的Properties API 继承hashmap ,不是顺序读写的. 特从网上查资料,顺序读写的代码,如下, import j ...

  5. centos7安装mysql（转载）

    Centos7安装并配置mysql5.6完美教程 Centos7将默认数据库mysql替换成了Mariadb,对于我们这些还想使用mysql的开发人员来说并不是一个好消息.然而,网上关于Linux安装 ...

  6. Oracle 数据库勒索病毒 RushQL 处理办法

    处理办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A% ...

  7. 7. Reverse Integer[E]整数反转

    题目 Given a 32-bit signed integer, reverse digits of an integer. Example1: x = 123, return 321 Exampl ...

  8. Selenium键盘鼠标操作总结

    鼠标操作 org.openqa.selenium.interactions.Actions 1.给元素设置焦点. 有时对于a标签等,为了不跳转到别的链接,但是需要设置焦点时就可使用. action.m ...

  9. struts2学习之基础笔记8

    文件的上传和下载 上传 步骤1:在文件上传表单中设置method和enctype属性值 格式:<s:form method=”post” enctype =”multipart/ form.da ...

  10. 微信小程序中获取高度及设备的方法

    由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().window ...