关于使用JS做轮播图，使用一个章节进行笔迹。

一：简单轮播图

1.程序

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

             border: 0;

         }

         .all {

             width: 500px;

             height: 200px;

             padding: 7px;

             border: 1px solid #ccc;

             margin: 100px auto;

             position: relative;  /*主要用于左右箭头的定位*/

         }

         .screen {

             width: 500px;

             height: 200px;

             overflow: hidden;

             position: relative;

         }

         .screen ul {

             position: absolute;

             left: 0;

             top: 0;

             width: 3000px;   /*将图片都装进来*/

         }

         .screen li {

             float: left;

             width: 500px;

             height: 200px;

         }

         /*-序号-*/

         .screen ol {

             position: absolute;

             left: 50%;

             bottom: 10px;

             line-height: 20px;

             text-align: center;

         }

         .screen ol li {

             float: left;

             width: 20px;

             height: 20px;

             background-color: #fff;

             border: 1px solid #ccc;

             margin-left: 10px;

             cursor: pointer;

             border-radius: 5px;

         }

         .screen ol li.current {

             background-color: #DB192A;

         }

         #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-family: "黑体";

             font-size: 30px;

             font-weight: bold;

             color: #fff;

             opacity: 0.3;

             border: 1px solid #ffffff;

         }

         #arr #right {

             right: 5px;

             left: auto;

         }

         #arr {

             display: none;

         }

     </style>

 </head>

 <body>

     <div id="box" class="all">

         <div class="screen">

             <ul>

                 <li><img src="data:images/1.jpg" alt="" width="500" height="200"></li>

                 <li><img src="data:images/2.jpg" alt="" width="500" height="200"></li>

                 <li><img src="data:images/3.jpg" alt="" width="500" height="200"></li>

                 <li><img src="data:images/4.jpg" alt="" width="500" height="200"></li>

                 <li><img src="data:images/5.jpg" alt="" width="500" height="200"></li>

             </ul>

             <ol>

                 <!--序号-->

             </ol>

         </div>

         <div id="arr">

             <span id="left">&lt;</span>

             <span id="right">&gt;</span>

         </div>

     </div>

     <script>

         //获取一些使用的数据

         var box = document.getElementById("box");

         var screenObj = box.children[0];

         var imgWidth = screenObj.offsetWidth;

         var ulObj = screenObj.children[0];

         var listObj = ulObj.children;

         var olObj = screenObj.children[1];

         var arr = document.getElementById("arr");

         //同步全局变量

         var pic = 0;

         for(var i=0; i<listObj.length; i++){

             //创建ol中的li

             var li = document.createElement("li");

             olObj.appendChild(li);

             li.innerHTML=i+1;

             li.setAttribute("index",i);

             //注册鼠标进入事件

             li.onmouseover=function () {

                 for (var j=0; j<olObj.children.length; j++){

                     olObj.children[j].removeAttribute("class");

                 }

                 this.className="current";

                 pic = this.getAttribute("index");

                 animate(ulObj, -pic * imgWidth);  //移动图片

             }

         }

         olObj.children[0].className="current";   //刚进入的初始化

         ulObj.appendChild(ulObj.children[0].cloneNode(true));   //在后面再添加一张第一张的图片

         //进行自动播放轮播

         var timeId = setInterval(clickHandle, 200000000);

         //鼠标进入div，显示左右箭头，停止定时器

         box.onmouseover=function () {

             arr.style.display="block";

             clearInterval(timeId);

         }

         //鼠标退出div，影藏左右箭头，继续定时器

         box.onmouseout=function () {

             arr.style.display="none";

             timeId = setInterval(clickHandle, 2000);

         }

         function clickHandle() {

             if(pic==listObj.length-1){

                 pic=0;

                 ulObj.style.left=0+"px";

             }

             pic++;

             animate(ulObj, -pic * imgWidth);

             if(pic==listObj.length-1){

                 olObj.children[olObj.children.length-1].className="";

                 olObj.children[0].className="current";

             }else{

                 for(var k=0;k<olObj.children.length; k++){

                     olObj.children[k].removeAttribute("class");

                 }

                 olObj.children[pic].className="current";

             }

         }

         //右边按钮

         document.getElementById("right").onclick=clickHandle;

         //左边按钮

         document.getElementById("left").onclick=function () {

             if(pic==0){

                 pic=5;

                 ulObj.style.left=-pic * imgWidth + "px";

             }

             pic--;

             animate(ulObj, -pic * imgWidth);

             for(var v=0; v<olObj.children.length; v++){

                 olObj.children[v].removeAttribute("class");

             }

             olObj.children[pic].className="current";

         }

         //移动到任意位置

         function animate(ele, target) {

             clearInterval(ele.timeId);

             ele.timeId = setInterval(function () {

                 var current = ele.offsetLeft;

                 var step = 10;

                 step = current<target?step:-step;

                 current+=step;

                 if(Math.abs(current-target)>Math.abs(step)){

                     ele.style.left=current+"px";

                 }else{

                     clearInterval(ele.timeId);

                     ele.style.left=target+"px";

                 }

             },10);

         }

     </script>

 </body>

 </html>

2.效果：

　　

二：offset系列

1..offsetLeft

　　没有脱离文档流：

　　　　父级元素margin+父级元素的padding+父级元素的border+自己的margin。

　　脱离文档流：

　　　　主要是自己的left+自己的margin

三：document获取元素

1.通过document获取元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <script>

         //获取body

         console.log(document.body);

         //获取title

         console.log(document.title);

         //获取html

         console.log(document.documentElement);

     </script>

 </body>

 </html>

2.图片跟着鼠标飞

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         img {

             position: absolute;

         }

     </style>

 </head>

 <body>

     <img src="demo/image/00_7.jpg" alt="" id="img" width="300px">

     <script>

         document.onmousemove=function (e) {

             document.getElementById("img").style.left=e.clientX+"px";

             document.getElementById("img").style.top=e.clientY+"px";

         }

     </script>

 </body>

 </html>

009 轮播图，offset系列的更多相关文章

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

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

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

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

  3. js-BOM之offset家族、移动函数的封装升级（轮播图）

    Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...

  4. JS-特效 ～ 01. 事件对象、offset偏移／检测、无缝滚动、自动循环轮播图

    Math.round ( ) :正书四舍五入,负数五舍六入 用定时器,先清除定时器 事件对象 event event:事件被触动时,鼠标和键盘的状态,通过属性控制 Offset:偏移,检测 1. 获取 ...

  5. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  6. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  7. iOS 图片轮播图（自动滚动）

    iOS 图片轮播图(自动滚动) #import "DDViewController.h" #define DDImageCount 5 @interface DDViewContr ...

  8. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【JavaScript】固定布局轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  2. 如何使用Arduino UNO开发板编程ATtiny85

    最近在Youtube上看了一个GreatScott制作的有关如何使用Attiny85的精彩教程,之后我购买了一片Attiny85 IC.但是,我花了很长时间尝试在它上面运行一个简单的LED闪烁的代码. ...

  3. node+express 搭建本地服务

    首先,得有node环境,其次建个项目 目录例如  酱紫! 再次 写server.js,当然你可以换个名字a.js .b.js.why.js随你喜欢 var express = require('exp ...

  4. istio-1.1.6镜像列表

    istio-1.1.6镜像列表 istio-1.1.6/install/kubernetes/istio-demo.yaml文件里提取出来的镜像,方便作harbor部署. ============== ...

  5. 《3+1团队》第九次团队作业：Beta冲刺与验收准备

    1.团队项目github仓库地址链接 https://github.com/HaiYou667/3-1Growingfruits 2.Scrum meeting导航: [Beta]Scrum meet ...

  6. ORACLE11g：No Dialect mapping for JDBC type: -9解决方案

    问题来源: 某个zhizhang同事不干活 好不容易干了个活 改了个字段长度,从varchar2(50) 改成了nvarchar(100) 结果因为方言问题,程序起不来了 字段类型也改不回来了 nnd ...

  7. Tomcat默认连接超时时间

    秒=1小时 2. 在web.xml中通过参数指定: xml 代码 <session-config>         <session-timeout>30</sessio ...

  8. python - alipay sdk 使用 及 注意点

    一. 在 点击跳转 这里拿到自己的 appid  和  支付宝公钥 ,    如果想要得到 支付宝的公钥 就需要获取 应用的公钥,具体获取方式 : 获取应用公钥和私钥 a. 应用私钥和支付宝公钥 获取 ...

  9. 【二分答案】Expanding Rods POJ 1905

    题目链接:http://poj.org/problem?id=1905 题目大意:原长度为L的线段因受热膨胀为一段弧,线段L.弧长L'.温度n.膨胀率c满足L' =(1+n/c)*L;求线段的中点移动 ...

  10. Django 第一天 开端

    今日内容: 一.HTTP协议 1.HTTP协议简介 参考博客:https://www.cnblogs.com/clschao/articles/9230431.html 是超文本传输协议 现在使用最广 ...