1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.      <head>
  5.          <meta charset="UTF-8">
  6.          <title></title>
  7.          <style type="text/css">
  8.              * {
  9.                  margin: 0px;
  10.                  padding: 0px;
  11.                  list-style: none;
  12.              }
  13.  
  14.              #box {
  15.                  position: absolute;
  16.                  left: 0px;
  17.                  right: 0px;
  18.                  bottom: 0px;
  19.                  top: 0px;
  20.                  margin: auto;
  21.                  width: 500px;
  22.                  height: 300px;
  23.              }
  24.  
  25.              ul>li {
  26.                  width: 100%;
  27.                  height: 100%;
  28.                  position: absolute;
  29.                  top: 0px;
  30.                  left: 0px;
  31.                  font-size: 40px;
  32.                  color: #fff;
  33.                  text-align: center;
  34.                  line-height: 300px;
  35.                  display: none;
  36.              }
  37.  
  38.              .ul li:nth-of-type(1) {
  39.                  background: red;
  40.              }
  41.  
  42.              .ul li:nth-of-type(2) {
  43.                  background: green;
  44.              }
  45.  
  46.              .ul li:nth-of-type(3) {
  47.                  background: blue;
  48.              }
  49.  
  50.              .ul li:nth-of-type(4) {
  51.                  background: #ff6700;
  52.              }
  53.  
  54.              span {
  55.                  font-size: 50px;
  56.                  font-weight: bold;
  57.                  display: inline-block;
  58.                  width: 40px;
  59.                  color: #fff;
  60.                  background: #b0b0b0;
  61.                  height: 60px;
  62.                  line-height: 60px;
  63.                  text-align: center;
  64.                  cursor: pointer;
  65.                  display: none;
  66.              }
  67.  
  68.              #box:hover span {
  69.                  display: block;
  70.              }
  71.  
  72.              .left {
  73.                  position: absolute;
  74.                  left: 0px;
  75.                  top: 120px;
  76.              }
  77.  
  78.              .right {
  79.                  position: absolute;
  80.                  right: 0px;
  81.                  top: 120px;
  82.              }
  83.  
  84.              ol {
  85.                  text-align: center;
  86.                  position: absolute;
  87.                  bottom: 20px;
  88.                  width: 100%;
  89.              }
  90.  
  91.              ol>li {
  92.                  display: inline-block;
  93.                  width: 15px;
  94.                  height: 15px;
  95.                  background: gray;
  96.                  border-radius: 100%;
  97.                  margin: 5px;
  98.                  cursor: pointer;
  99.              }
  100.              .show {
  101.                  display: block;
  102.              }
  103.              .change {
  104.                  background-color: #fff;
  105.              }
  106.          </style>
  107.      </head>
  108.      <body>
  109.          <div id="box">
  110.              <ul class="ul">
  111.                  <li>第一张</li>
  112.                  <li>第二张</li>
  113.                  <li>第三张</li>
  114.                  <li>第四张</li>
  115.              </ul>
  116.              <ol>
  117.                  <li class="point"></li>
  118.                  <li class="point"></li>
  119.                  <li class="point"></li>
  120.                  <li class="point"></li>
  121.              </ol>
  122.              <span class="left"><</span>
  123.              <span class="right">></span>
  124.          </div>
  125.          <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  126.          <script type="text/javascript">
  127.              var box = document.querySelector("#box");
  128.              var ul = document.querySelector(".ul");
  129.              var lis = ul.getElementsByTagName("li");
  130.              var right = document.querySelector(".right");
  131.              var left = document.querySelector(".left");
  132.              var point = document.querySelectorAll(".point");
  133.  
  134.              lis[0].className = "show";
  135.              point[0].className = "change";
  136.              var i = 0, timer;
  137.  
  138.              //自动播放
  139.  
  140.              Auto();
  141.              function Auto() {
  142.                  if(timer){
  143.                      clearInterval(timer);
  144.                  }
  145.                  function show() {
  146.                      i++;
  147.                      if(i >= lis.length) {
  148.                          i = 0
  149.                      }
  150.                      clear(i);
  151.                  }
  152.                  timer = setInterval(show, 1500);
  153.              }
  154.  
  155.              //单击左边
  156.              left.onclick = function() {
  157.                  i--;
  158.                  if(i < 0) {
  159.                      i = lis.length - 1;
  160.                  }
  161.                  console.log(i);
  162.                  clear(i);
  163.              }
  164.  
  165.              //单击右边
  166.              right.onclick = function() {
  167.                  i++;
  168.                  if(i >= lis.length) {
  169.                      i = 0;
  170.                  }
  171.                  clear(i);
  172.              }
  173.              //重置属性
  174.              function clear(t) {
  175.                  for(var j = 0; j < lis.length; j++) {
  176.                      lis[j].className = "";
  177.                      point[j].className = "";
  178.                  }
  179.                  lis[t].className = "show";
  180.                  point[t].className = "change";
  181.              }
  182.              //单击小圆圈播放 (注意函数的闭包问题 )
  183.              for(var k = 0; k < point.length; k++) {
  184.                  point[k].index = k; //闭包问题的解决，自定义属性
  185.                  point[k].onclick = function() {
  186.                      i = this.index;
  187.                      clear(i);
  188.                  }
  189.              }
  190.  
  191.              box.onmouseenter = function(){
  192.                  clearInterval(timer);
  193.              }
  194.              box.onmouseleave = function(){
  195.                  setTimeout(Auto, 1000);
  196.              }

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. google浏览器中 查看记住的账号和密码

    对于一个有“健忘症”的人来说,密码形同虚设..设置了就忘记,每次登陆都要重新设置密码... 然后,无意中发现,谷歌浏览器点过一次记住密码后,竟然可以明文查看账号和密码!! 步骤: 1.打开谷歌浏览器, ...

  2. String与StringBuffer与StringBuilder

    package test; public class Test { public static void main(String[] args) { StringBuffer sb = new Str ...

  3. HDU1850 Being a Good Boy in Spring Festival

    /* HDU1850 Being a Good Boy in Spring Festival http://acm.hdu.edu.cn/showproblem.php?pid=1850 博弈论 尼姆 ...

  4. [using_microsoft_infopath_2010]Chapter13 SharePoint视图和控制板

    本章概要: 1.规划站点的外观,使用View和web部件 2.为登录进来的用户展示相关的表单. 3.为管理员创建视图 4.从表单中收集到的数据中创建报表

  5. SQL注入原理以及怎样避免注入

    SQL注入:究竟什么时候会用到SQL呢?回答是訪问数据库的时候.也就是说SQL注入-->直接威胁到了数据源,呵呵.数据库都收到了威胁,站点还能正常现实么? 所谓SQL注入,就是通过把SQL命令插 ...

  6. robot framework环境配置

    1.Robot framework的安装 作用:web自动化测试框架. RF框架是基于python 的,所以一定要有python环境.网上可以自行查找. 下载地址:https://pypi.pytho ...

  7. c++中字符输入函数getline、cin.getline区分

    1.cin>>s; s能够是:string  s.char s[]; 这个是ostream中的函数.遇到' '(空格) , '\n'(换行),就会自己主动结束,因此假设用cin读取字符串, ...

  8. P1233 木棍加工

    P1233 木棍加工 题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间 ...

  9. 17. Letter Combinations of a Phone Number[M]电话号码的字母组合

    题目 Given a string containing digits from 2-9 inclusive, return all possible letter combinations that ...

  10. POJ 1155 树形DP

    题意:电视台发送信号给很多用户,每个用户有愿意出的钱,电视台经过的路线都有一定费用,求电视台不损失的情况下最多给多少用户发送信号. 转自:http://www.cnblogs.com/andre050 ...