<!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. Charles抓包工具抓取HTTS请求

    1. 移动端(手机)配置证书 1.1 进入Charles,点击Help,选择SSL Proxying --> 选择安装手机证书 1.2 在Charles弹框提示中,按照提示内容,进入手机进入下图 ...

  2. 06006_redis数据存储类型——String

    1.概述 (1)字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等: (2)在Redis中 ...

  3. Ubuntu 15.10配置OpenCV

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50635705 1 安装前准备 安装以下 ...

  4. Cache index coloring for virtual-address dynamic allocators

    A method for managing a memory, including obtaining a number of indices and a cache line size of a c ...

  5. Ajax-URL 防止数据缓存,添加时间戳

    url:CONTEXTPATH + "/dataService/getSourceStatics?type=0&t="+new Date().getTime(),

  6. HDU 2035 不忍直视的水

    #include <iostream> #include <cstdio> #include <algorithm> using namespace std; in ...

  7. 具体解释Redis源代码中的部分高速排序算法（pqsort.c）

    看标题.你可能会疑惑:咦?你这家伙.怎么不解说完整的快排,仅仅讲一部分快排---.- 哎,冤枉. "部分快排"是算法的名字.实际上本文相当具体呢.本文差点儿与普通快排无异.看懂了本 ...

  8. iOS开发-文件管理之多的是你不知道的事（一）

    郝萌主倾心贡献.尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  9. fontend-githubs

    https://github.com/dypsilon/frontend-dev-bookmarks

  10. 浅谈Model1 VS Model2

    在学习drp的过程中就对model1和model2产生了浓厚的兴趣,一直都没有好好总结下,接下来就和大家一起学习下它们的真面目. 一.是什么? 首先大家提到model想到了什么?它的名词意识是:模型: ...