Math.round ( ) :正书四舍五入，负数五舍六入

用定时器，先清除定时器

事件对象 event

　　event：事件被触动时，鼠标和键盘的状态，通过属性控制

　　Offset：偏移，检测

　　　　1. 获取元素尺寸

　　　　2. 检测盒子的宽高

　　　　     事件源.offsetLeft. /. ele.offsetWidth /返回的数值没有单位，是number类型 ／包括内边距、边框，不包括外边距

　　　　3. 获取定位的元素的left和top值  offsetLeft / offsetTop

　　　　　　如果被获取的元素没有定位，则按照浏览器为基准／从父盒子的padding开始计算

　　　　　　返回最近距离上级盒子，定位的左上位置／父盒子的边框不算／ ele.style.left  自带px

　　　　4. offsetParent       若有除static之外的定位，则返回最近的

　　　　　　检测父盒子中带有定位的父盒子节点／返回上级已定位盒子的标签／若父系盒子没有定位，则返回body

　　　　5. offsetLeft和style.left的区别

　　　　　　ele.style.left带有px 是字符串类型. / offsetLefta不带px，是数值类型

　　　　　　.style.top 可获取行内式，若内有top属性，返回 ' ' ;空字符串

　　　　　　offsetLeft可返回没有定位的盒子，没定位返回body

　　　　　　offsetLeft只读，  .style.top可读写赋值

　animate. 动画

　　　　1. 闪现／匀速／缓动

　　　　2. 匀速：    添加定时循环事件。盒子原来的长度加上步长／用offsetLeft取值 ，.style.left 幅值

无缝滚动思路

　　　　思路： 复制第一张图片放到ul最后／当图片到最后一张时，此时为复制第一张图，此时若继续，则先瞬移到第一张本图，

　　　　　　　然后照常轮播

　　　　步骤

    1. 获取事件源以及相关元素
    2. 复制第一张图片所在的li添加到ul最后
    3. 给ol中添加li，ul个数见一个，并点亮第一个
    4. 鼠标放到ol的li上切换图片
    5. 添加定时器
    6. 左右切换图片
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: pink;
  11.             position: absolute;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <button>动画</button>
  17. <div class="box" style="left: 0px"></div>
  18.  
  19. <script>
  20.  
  21.     var btn = document.getElementsByTagName("button")[0];
  22.     var div = document.getElementsByTagName("div")[0];
  23.  
  24.     //闪动
  25. //    btn.onclick = function () {
  26. //        div.style.left = "500px";
  27. //    }
  28.  
  29.     //匀速运动
  30.     btn.onclick = function () {
  31.         //定时器，每隔一定的时间向右走一些
  32.         setInterval(function () {
  33.             console.log(parseInt(div.style.left));
  34. //            div.style.left = parseInt(div.style.left)+10+"px";  //NaN不能用
  35.             //动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；
  36.             //style.left赋值，用offsetLeft获取值。
  37.             //style.left获取值不方便，获取行内式，如果没有事“”；容易出现NaN；
  38.             //offsetLeft获取值特别方便，而且是现成number方便计算。因为他是只读的不能赋值。
  39.             div.style.left = div.offsetLeft + 10 + "px";
  40.         },300);
  41.     }
  42.  
  43. </script>
  44. </body>
  45. </html>

体验动画

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .box1 {
  8.             margin: 0;
  9.             padding: 5px;
  10.             height: 300px;
  11.             background-color: #ddd;
  12.             position: relative;
  13.         }
  14.         button {
  15.             margin: 5px;
  16.         }
  17.         .box2 {
  18.             width: 100px;
  19.             height: 100px;
  20.             background-color: red;
  21.             position: absolute;
  22.             left: 0;
  23.             top: 40px;
  24.         }
  25.         .box3 {
  26.             width: 100px;
  27.             height: 100px;
  28.             background-color: yellow;
  29.             position: absolute;
  30.             left: 0;
  31.             top: 150px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="box1">
  37.     <button>运动到200</button>
  38.     <button>运动到400</button>
  39.     <div class="box2"></div>
  40.     <div class="box3"></div>
  41. </div>
  42.  
  43. <script>
  44.  
  45.     var btnArr = document.getElementsByTagName("button");
  46.     var box2 = document.getElementsByClassName("box2")[0];
  47.     var box3 = document.getElementsByClassName("box3")[0];
  48.  
  49.     //绑定事件
  50.     btnArr[0].onclick = function () {
  51.         //如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了
  52.         //所以我们要增加第二个参数，被移动的盒子本身。
  53.         animate(box2,200);
  54.         animate(box3,200);
  55.     }
  56.  
  57.     btnArr[1].onclick = function () {
  58.         animate(box2,400);
  59.         animate(box3,400);
  60.     }
  61.  
  62.     function animate(ele,target){
  63.         //要用定时器，先清除定时器
  64.         //一个盒子只能有一个定时器，这样儿的话，不会和其他盒子出现定时器冲突
  65.         //而定时器本身讲成为盒子的一个属性
  66.         clearInterval(ele.timer);
  67.         //我们要求盒子既能向前又能向后，那么我们的步长就得有正有负
  68.         //目标值如果大于当前值取正，目标值如果小于当前值取负
  69.         var speed = target>ele.offsetLeft?10:-10;
  70.         ele.timer = setInterval(function () {
  71.             //在执行之前就获取当前值和目标值之差
  72.             var val = target - ele.offsetLeft;
  73.             ele.style.left = ele.offsetLeft + speed + "px";
  74.             //目标值和当前值只差如果小于步长，那么就不能在前进了
  75.             //因为步长有正有负，所有转换成绝对值来比较
  76.             if(Math.abs(val)<Math.abs(speed)){
  77.                 ele.style.left = target + "px";
  78.                 clearInterval(ele.timer);
  79.             }
  80.         },30)
  81.     }
  82.  
  83. </script>
  84. </body>
  85. </html>

动画封装

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .box {
  12.             width: 490px;
  13.             height: 170px;
  14.             padding: 5px;
  15.             border: 1px solid #ccc;
  16.             margin: 100px auto;
  17.         }
  18.         .inner {
  19.             width: 490px;
  20.             height: 170px;
  21.             position: relative;
  22.             overflow: hidden;
  23.         }
  24.         ul {
  25.             width: 500%;
  26.             list-style: none;
  27.             position: absolute;
  28.             left: 0;
  29.         }
  30.         li {
  31.             float: left;
  32.         }
  33.         .square {
  34.             position: absolute;
  35.             bottom: 10px;
  36.             right: 10px;
  37.         }
  38.         span {
  39.             display: inline-block;
  40.             width: 16px;
  41.             height: 16px;
  42.             background-color: #fff;
  43.             text-align: center;
  44.             margin: 3px;
  45.             border: 1px solid #ccc;
  46.             line-height: 16px;
  47.             cursor: pointer;
  48.         }
  49.         .current {
  50.             background-color: darkorange;
  51.             color: #fff;
  52.         }
  53.     </style>
  54.  
  55.     <script>
  56.         window.onload = function () {
  57.             //需求：鼠标放到小方块上面，上面的图片(ul向左移动指定的个数个图片的宽)
  58.             //思路：绑定事件，点亮指定的盒子，移动ul。
  59.             //步骤：
  60.             //1.获取事件源和相关元素
  61.             //2.绑定事件和书写事件驱动程序(for循环绑定)
  62.             //3.点亮盒子
  63.             //4.移动ul(向左移动，给定目标为-值，放到第n个小方块上向左移动n-1个图片的宽)
  64.  
  65.             //1.获取事件源和相关元素
  66.             var inner = document.getElementById("inner");
  67.             var imgWidth = inner.offsetWidth;
  68.             var ul =  inner.children[0];
  69.             var spanArr =  inner.children[1].children;
  70.             //2.绑定事件和书写事件驱动程序(for循环绑定)
  71.             for(var i=0;i<spanArr.length;i++){
  72.                 //属性绑定（自定义属性参数盒子的索引值）
  73.                 //用span的innerHTML属性也可以，但是为了代码的健壮性，我们选择使用自己的属性
  74.                 spanArr[i].index = i; //绑定的是索引值，所以移动盒子的时候不用-1
  75.                 spanArr[i].onmouseover = function () {
  76.                     //3.点亮盒子
  77.                     //排他思想
  78.                     for(var j=0;j<spanArr.length;j++){
  79.                         spanArr[j].className = "";
  80.                     }
  81.                     this.className = "current";
  82.                     //4.移动ul(向左移动，给定目标为-值，放到第n个小方块上向左移动n-1个图片的宽)
  83.                     //利用框架移动盒子。（两个参数：1.元素。  2.目标位置）
  84.                     animate(ul,-this.index*imgWidth);
  85.                 }
  86.             }
  87.  
  88.             function animate(ele,target){
  89.                 clearInterval(ele.timer);
  90.                 var speed = target>ele.offsetLeft?10:-10;
  91.                 ele.timer = setInterval(function () {
  92.                     var val = target - ele.offsetLeft;
  93.                     ele.style.left = ele.offsetLeft + speed + "px";
  94.                     if(Math.abs(val)<Math.abs(speed)){
  95.                         ele.style.left = target + "px";
  96.                         clearInterval(ele.timer);
  97.                     }
  98.                 },10)
  99.             }
  100.         }
  101.  
  102.     </script>
  103. </head>
  104. <body>
  105.     <div class="box">
  106.         <div class="inner" id="inner">
  107.             <ul>
  108.                 <li><img src="data:images/01.jpg" alt=""/></li>
  109.                 <li><img src="data:images/02.jpg" alt=""/></li>
  110.                 <li><img src="data:images/03.jpg" alt=""/></li>
  111.                 <li><img src="data:images/04.jpg" alt=""/></li>
  112.                 <li><img src="data:images/05.jpg" alt=""/></li>
  113.             </ul>
  114.             <div class="square">
  115.                 <span class="current">1</span>
  116.                 <span>2</span>
  117.                 <span>3</span>
  118.                 <span>4</span>
  119.                 <span>5</span>
  120.             </div>
  121.         </div>
  122.     </div>
  123. </body>
  124. </html>

滑动焦点图

  1. <!doctype html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>无标题文档</title>
  5.     <style type="text/css">
  6.         body,ul,ol,li,img{margin:0;padding:0;list-style:none;}
  7.         #box{width:490px;height:170px;padding:5px;
  8.             position: relative;border:1px solid #ccc;margin:100px auto 0;overflow:hidden;}
  9.         .ad{width:490px;height:170px;overflow:hidden;position:relative;}
  10.         #box img{width:490px;}
  11.         .ad ol{position:absolute;right:10px;bottom:10px;}
  12.         .ad ol li{width:20px;height:20px;line-height:20px;border:1px solid #ccc;text-align:center;background:#fff;float:left;margin-right:10px;cursor:pointer;_display:inline;}
  13.         .ad ol li.current{background:yellow;}
  14.         .ad ul li{float:left;}
  15.         .ad ul{ position:absolute; top:0; width:2940px;}
  16.         .ad ul li.current{display:block;}
  17.         #arr {display: none;}
  18.         #arr span{ width:40px; height:40px; position:absolute; left:5px; top:50%; margin-top:-20px; background:#000; cursor:pointer; line-height:40px; text-align:center; font-weight:bold; font-family:'黑体'; font-size:30px; color:#fff; opacity:0.3; border:1px solid #fff;}
  19.         #arr #right{right:5px; left:auto;}
  20.     </style>
  21. </head>
  22. <body>
  23. <div id="box" class="all">
  24.     <div class="ad">
  25.         <ul id="imgs">
  26.             <li><img src="data:images/1.jpg" /></li>
  27.             <li><img src="data:images/2.jpg" /></li>
  28.             <li><img src="data:images/3.jpg" /></li>
  29.             <li><img src="data:images/4.jpg" /></li>
  30.             <li><img src="data:images/5.jpg" /></li>
  31.         </ul>
  32.     </div>
  33.     <div id="arr">
  34.         <span id="left"><</span>
  35.         <span id="right">></span>
  36.     </div>
  37. </div>
  38.  
  39. <script>
  40.     //需求：鼠标放到盒子上，显示左右切换的图片。点击左则按钮图片(ul)向右移动，相反的按钮向左移动。
  41.     //思路：获取两个按钮，点击左侧按钮移动ul向右走(每次只走一张)(计数器从0开始)。
  42.     //如何移动盒子。利用计数器模拟index值，点右侧自增，点左侧自减。
  43.     //步骤：
  44.     //1.鼠标放上去显示移开以藏
  45.     //2.点击右侧盒子图片向做移动并用计数器模拟index值。
  46.     //3，点击左侧盒子，同理。
  47.  
  48.     //1.鼠标放上去显示移开以藏
  49.     var box = document.getElementById("box");
  50.     var imgWidth = box.children[0].offsetWidth;
  51.     var ul = box.children[0].children[0];
  52.     var boxLeftRight = box.children[1];
  53.     var btnArr = boxLeftRight.children;
  54.  
  55.     //鼠标放上去显示，移开隐藏
  56.     box.onmouseover = function () {
  57.         boxLeftRight.style.display = "block";
  58.     }
  59.     box.onmouseout = function () {
  60.         boxLeftRight.style.display = "none";
  61.     }
  62.  
  63.     //2.点击右侧盒子图片向做移动并用计数器模拟index值。
  64.     //定义计数器
  65.     var index = 0;
  66.  
  67.     btnArr[1].onclick = function () {
  68.         index++;
  69.         //我们要对index的值进行约束。index的值必须在[0,4]
  70.         if(index>ul.children.length-1){
  71.             index = ul.children.length-1;
  72.             alert("到头了！");
  73.         }
  74.         //点击盒子以后移动图片（ul，和目标位置）
  75.         animate(ul,-index*imgWidth);
  76.     }
  77.  
  78.     //3，点击左侧盒子，同理。
  79.     btnArr[0].onclick = function () {
  80.         index--;
  81.         if(index<0){
  82.             index = 0;
  83.             alert("第一张！");
  84.         }
  85.         //点击盒子以后移动图片（ul，和目标位置）
  86.         animate(ul,-index*imgWidth);
  87.     }
  88.  
  89.     function animate(ele,target){
  90.         clearInterval(ele.timer);
  91.         var speed = target>ele.offsetLeft?10:-10;
  92.         ele.timer = setInterval(function () {
  93.             var val = target - ele.offsetLeft;
  94.             ele.style.left = ele.offsetLeft + speed + "px";
  95.             if(Math.abs(val)<Math.abs(speed)){
  96.                 ele.style.left = target + "px";
  97.                 clearInterval(ele.timer);
  98.             }
  99.         },10)
  100.     }
  101. </script>
  102.  
  103. </body>
  104. </html>

左右焦点图

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>无标题文档</title>
  6.     <style type="text/css">
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.             list-style: none;
  11.             border: 0;
  12.         }
  13.  
  14.         .all {
  15.             width: 500px;
  16.             height: 200px;
  17.             padding: 7px;
  18.             border: 1px solid #ccc;
  19.             margin: 100px auto;
  20.             position: relative;
  21.         }
  22.  
  23.         .screen {
  24.             width: 500px;
  25.             height: 200px;
  26.             overflow: hidden;
  27.             position: relative;
  28.         }
  29.  
  30.         .screen li {
  31.             width: 500px;
  32.             height: 200px;
  33.             overflow: hidden;
  34.             float: left;
  35.         }
  36.  
  37.         .screen ul {
  38.             position: absolute;
  39.             left: 0;
  40.             top: 0px;
  41.             width: 3000px;
  42.         }
  43.  
  44.         .all ol {
  45.             position: absolute;
  46.             right: 10px;
  47.             bottom: 10px;
  48.             line-height: 20px;
  49.             text-align: center;
  50.         }
  51.  
  52.         .all ol li {
  53.             float: left;
  54.             width: 20px;
  55.             height: 20px;
  56.             background: #fff;
  57.             border: 1px solid #ccc;
  58.             margin-left: 10px;
  59.             cursor: pointer;
  60.         }
  61.  
  62.         .all ol li.current {
  63.             background: yellow;
  64.         }
  65.  
  66.         #arr {
  67.             display: none;
  68.         }
  69.  
  70.         #arr span {
  71.             width: 40px;
  72.             height: 40px;
  73.             position: absolute;
  74.             left: 5px;
  75.             top: 50%;
  76.             margin-top: -20px;
  77.             background: #000;
  78.             cursor: pointer;
  79.             line-height: 40px;
  80.             text-align: center;
  81.             font-weight: bold;
  82.             font-family: '黑体';
  83.             font-size: 30px;
  84.             color: #fff;
  85.             opacity: 0.3;
  86.             border: 1px solid #fff;
  87.         }
  88.  
  89.         #arr #right {
  90.             right: 5px;
  91.             left: auto;
  92.         }
  93.     </style>
  94.  
  95.     <script>
  96.         window.onload = function () {
  97.  
  98.             //需求：无缝滚动。
  99.             //思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候
  100.             //     直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到
  101.             //     第一张图片，然后滑动到第二张
  102.             //步骤：
  103.             //1.获取事件源及相关元素。（老三步）
  104.             //2.复制第一张图片所在的li,添加到ul的最后面。
  105.             //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
  106.             //4.鼠标放到ol的li上切换图片
  107.             //5.添加定时器
  108.             //6.左右切换图片（鼠标放上去隐藏，移开显示）
  109.  
  110.             //1.获取事件源及相关元素。（老三步）
  111.             var all = document.getElementById("all");
  112.             var screen = all.firstElementChild || all.firstChild;
  113.             var imgWidth = screen.offsetWidth;
  114.             var ul = screen.firstElementChild || screen.firstChild;
  115.             var ol = screen.children[1];
  116.             var div = screen.lastElementChild || screen.lastChild;
  117.             var spanArr = div.children;
  118.  
  119.             console.log(all);
  120.             console.log(screen);
  121.             console.log(imgWidth);
  122.             console.log(ul);
  123.             console.log(ol);
  124.             console.log(div);
  125.             console.log(spanArr);
  126.  
  127.             //2.复制第一张图片所在的li,添加到ul的最后面。
  128.             var ulNewLi = ul.children[0].cloneNode(true);
  129.             ul.appendChild(ulNewLi);
  130.             //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
  131.             for (var i = 0; i < ul.children.length - 1; i++) {
  132.                 var olNewLi = document.createElement("li");
  133.                 olNewLi.innerHTML = i + 1;
  134.                 ol.appendChild(olNewLi)
  135.             }
  136.             var olLiArr = ol.children;
  137.             olLiArr[0].className = "current";
  138.  
  139.             //4.鼠标放到ol的li上切换图片
  140.             for (var i = 0; i < olLiArr.length; i++) {
  141.                 //自定义属性，把索引值绑定到元素的index属性上
  142.                 olLiArr[i].index = i;
  143.                 olLiArr[i].onmouseover = function () {
  144.                     //排他思想
  145.                     for (var j = 0; j < olLiArr.length; j++) {
  146.                         olLiArr[j].className = "";
  147.                     }
  148.                     this.className = "current";
  149.                     //鼠标放到小的方块上的时候索引值和key以及square同步
  150. //                    key = this.index;
  151. //                    square = this.index;
  152.                     key = square = this.index;
  153.                     //移动盒子
  154.                     animate(ul, -this.index * imgWidth);
  155.                 }
  156.             }
  157.  
  158.             //5.添加定时器
  159.             var timer = setInterval(autoPlay, 1000);
  160.  
  161.             //固定向右切换图片
  162.             //两个定时器（一个记录图片，一个记录小方块）
  163.             var key = 0;
  164.             var square = 0;
  165.  
  166.             function autoPlay() {
  167.                 //通过控制key的自增来模拟图片的索引值，然后移动ul
  168.                 key++;
  169.                 if (key > olLiArr.length) {
  170.                     //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
  171.                     ul.style.left = 0;
  172.                     key = 1;
  173.                 }
  174.                 animate(ul, -key * imgWidth);
  175.                 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
  176.                 //排他思想做小方块
  177.                 square++;
  178.                 if (square > olLiArr.length - 1) {//索引值不能大于等于5，如果等于5，立刻变为0；
  179.                     square = 0;
  180.                 }
  181.                 for (var i = 0; i < olLiArr.length; i++) {
  182.                     olLiArr[i].className = "";
  183.                 }
  184.                 olLiArr[square].className = "current";
  185.             }
  186.  
  187.             //鼠标放上去清除定时器，移开后在开启定时器
  188.             all.onmouseover = function () {
  189.                 div.style.display = "block";
  190.                 clearInterval(timer);
  191.             }
  192.             all.onmouseout = function () {
  193.                 div.style.display = "none";
  194.                 timer = setInterval(autoPlay, 1000);
  195.             }
  196.  
  197.             //6.左右切换图片（鼠标放上去显示，移开隐藏）
  198.             spanArr[0].onclick = function () {
  199.                 //通过控制key的自增来模拟图片的索引值，然后移动ul
  200.                 key--;
  201.                 if (key < 0) {
  202.                     //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
  203.                     ul.style.left = -imgWidth * (olLiArr.length) + "px";
  204.                     key = olLiArr.length - 1;
  205.                 }
  206.                 animate(ul, -key * imgWidth);
  207.                 //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
  208.                 //排他思想做小方块
  209.                 square--;
  210.                 if (square < 0) {//索引值不能大于等于5，如果等于5，立刻变为0；
  211.                     square = olLiArr.length - 1;
  212.                 }
  213.                 for (var i = 0; i < olLiArr.length; i++) {
  214.                     olLiArr[i].className = "";
  215.                 }
  216.                 olLiArr[square].className = "current";
  217.             }
  218.             spanArr[1].onclick = function () {
  219.                 //右侧的和定时器一模一样
  220.                 autoPlay();
  221.             }
  222.  
  223.             function animate(ele, target) {
  224.                 clearInterval(ele.timer);
  225.                 var speed = target > ele.offsetLeft ? 10 : -10;
  226.                 ele.timer = setInterval(function () {
  227.                     var val = target - ele.offsetLeft;
  228.                     ele.style.left = ele.offsetLeft + speed + "px";
  229.                     if (Math.abs(val) < Math.abs(speed)) {
  230.                         ele.style.left = target + "px";
  231.                         clearInterval(ele.timer);
  232.                     }
  233.                 }, 10)
  234.             }
  235.         }
  236.     </script>
  237. </head>
  238.  
  239. <body>
  240. <div class="all" id='all'>
  241.     <div class="screen" id="screen">
  242.         <ul id="ul">
  243.             <li><img src="data:images/1.jpg" width="500" height="200"/></li>
  244.             <li><img src="data:images/2.jpg" width="500" height="200"/></li>
  245.             <li><img src="data:images/3.jpg" width="500" height="200"/></li>
  246.             <li><img src="data:images/4.jpg" width="500" height="200"/></li>
  247.             <li><img src="data:images/5.jpg" width="500" height="200"/></li>
  248.         </ul>
  249.         <ol>
  250.  
  251.         </ol>
  252.         <div id="arr">
  253.             <span id="left"><</span>
  254.             <span id="right">></span>
  255.         </div>
  256.     </div>
  257. </div>
  258. </body>
  259. </html>

简单焦点图／轮播图

　　　　　　

JS-特效 ～ 01. 事件对象、offset偏移／检测、无缝滚动、自动循环轮播图的更多相关文章

  1. JavaScript动画：offset和匀速动画详解(含轮播图的实现)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...

  2. 无限循环轮播图之JS部分（原生JS）

    JS逻辑与框架调用, <script type="text/javascript"> var oBox = document.getElementById('box') ...

  3. 无限循环轮播图之结构布局（原生JS）

    html部分 <div class="box" id="box"> <ul> <li><img src="i ...

  4. 无限循环轮播图之运动框架（原生JS）

    封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...

  5. 用jquery或js实现三个div自动循环轮播

    //3个div的统一class = 'div' var index =0; //3秒轮播一次 var timer = setInterval(function(){     index = (inde ...

  6. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  7. js 轮播图 (原生)

    注 : 此处内容较多, 只显示代码, 具体讲解看注释.  具体参考 "黑马 pink老师"   https://www.bilibili.com/video/BV1Sy4y1C7h ...

  8. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  9. 用 JS 写 （轮播图 / 选项卡 / 滑动门）

    页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...

随机推荐

  1. OV SSL证书有哪些功能？网站安装OV SSL证书的好处

    OV SSL证书英文名称为Organization Validation SSL Certificate,申请OV SSL证书需要审核申请者对域名是否拥有控制权,同时审核申请者是否为一个合法登记.真实 ...

  2. 8、大型项目的接口自动化实践记录----DB分别获取预期结果、实际结果

    上一篇实现数据分离升级版--从DB获取数据,以及对应的请求实现,作为一个case,还缺少了预期结果与实际结果的获取及对比.因为前面的文章已经说过接口返回值的获取及对比,所以这篇不说这块了,这篇说一下D ...

  3. 【Java例题】7.4 文件题1-学生成绩排序

    4.学生成绩排序.已有一个学生成绩文件,含有多位学生的成绩:读取这个文件中的每位学生的成绩,然后排序:最后将这些排好序的成绩写到另一个文件中. package chapter7; import jav ...

  4. .netcore持续集成测试篇之开篇简介及Xunit基本使用

    系列目录 为了支持跨平台,微软为.net平台提供了.net core test sdk,这样第三方测试框架诸如Nunit,Xunit等只需要按照sdk提供的api规范进行开发便可以被dotnet cl ...

  5. Vue系列：Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  6. .netcore持续集成测试篇之MVC测试

    前面我们讲的很多单元测试的的方法和技巧不论是在.net core和.net framework里面都是通用的,但是mvc项目里有一种比较特殊的类是Controller,首先Controller类的返回 ...

  7. 配置Windows Server 2008环境

    上一章已经把Windows Server2008操作系统安装完毕,接下来配置一下Windows Server环境.配置网络和共享中心.配置桌面环境.配置用户IE设置.安装Telnet远程工具.配置文件 ...

  8. R-package XML 安装失败及解决方式

    安装R-package XML遇到的问题和解决方式 这个问题已经困扰了我很久很久一直找不到解决之法,后来终于找到了! Fedora 27, R 3.5.0, libxml和libxml2以及开发包均已 ...

  9. Django-内置用户系统

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括 1.用户注册 2.用户登录 3.用户认证 4.注销 5.修改密码 Django作为一个 ...

  10. 如何用Python实现敏感词的过滤

    题目要求如下: 从文件解析敏感词,从终端获取用户输入.根据敏感词对用户输入进行过滤.这里过滤需要考虑不止一个过滤词:即将读取的所有过滤词,放进一个列表,用屏蔽词检索用户输入,如果有屏蔽词,则将其替换为 ...