1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta 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. </head>
  95. <body>
  96. <div class="all" id='box'>
  97.     <div class="screen">
  98.         <ul>
  99.             <li><img src="data:images/1.jpg" width="500" height="200"/></li>
  100.             <li><img src="data:images/2.jpg" width="500" height="200"/></li>
  101.             <li><img src="data:images/3.jpg" width="500" height="200"/></li>
  102.             <li><img src="data:images/4.jpg" width="500" height="200"/></li>
  103.             <li><img src="data:images/5.jpg" width="500" height="200"/></li>
  104.         </ul>
  105.         <ol>
  106.         </ol>
  107.     </div>
  108.     <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
  109. </div>
  110. <script>
  111.     function $(element) {
  112.         return document.getElementById(element);
  113.     }
  114.     var box = $("box");
  115.     var screen = box.children[0];
  116.     var ul = screen.children[0];
  117.     var ulLis = ul.children;
  118.     var ol = screen.children[1];
  119.     var arr = $("arr");
  120.     var left = $("left");
  121.     var right = $("right");
  122.     //动态创建小图标
  123.     for (var i = 0; i < ulLis.length; i++) {
  124.         var li = document.createElement("li");
  125.         li.innerHTML = i + 1;
  126.         ol.appendChild(li);
  127.     }
  128.     //设置这些个小图标
  129.     var olLis = ol.children;
  130.     var imgWidth = screen.offsetWidth;
  131.     for (var j = 0; j < olLis.length; j++) {
  132.         olLis[j].index = j;
  133.         olLis[j].onmouseover = function () {
  134.             //排他思想
  135.             for (var i = 0; i < olLis.length; i++) {
  136.                 olLis[i].className = "";
  137.             }
  138.             this.className = "current";
  139.             var target = -imgWidth * this.index;
  140.             cutton(ul, target, 20);
  141.             //为了让点击事件和小面的小图标能够一一对应，设置他们的索引值相同
  142.             pic = square = this.index;
  143.         }
  144.     }
  145.     //给小图标设置一个初始样式
  146.     ol.children[0].className = "current";
  147.     //给ul追加一张图
  148.     ul.appendChild(ul.children[0].cloneNode(true));
  149.     //设置箭头的显示与隐藏
  150.     box.onmouseover = function () {
  151.         arr.style.display = "block";
  152.         //鼠标放上去的时候，不再自动滚动
  153.         clearInterval(timer);
  154.     }
  155.     box.onmouseout = function () {
  156.         arr.style.display = "none";
  157.         //鼠标离开的时候，继续自动滚动
  158.         timer = setInterval(playNext, 1000);
  159.     }
  160.     //设置点击左右小箭头的事件且要求小图标要跟着变化
  161.     //1.设置点击右侧箭头
  162.     var pic = 0;//记录当前为第几项用
  163.     var square = 0;//记录小图标的索引值
  164.     /* right.onclick = function () {//存在的问题是当移动到最后一张的时候，无法跳转到第一张
  165.      pic++;
  166.      var target = -pic * imgWidth;
  167.      cutton(ul, target, 20);
  168.      }*/
  169.     //方法改进
  170.     /*right.onclick = function () {
  171.      //先对pic做一个判断，当pic的值为5的时候，实现一个跳转
  172.      if (pic == ulLis.length - 1) {
  173.      ul.style.left = 0;
  174.      pic = 0;
  175.      }
  176.      pic++;
  177.      var target = -pic * imgWidth;
  178.      cutton(ul, target, 20);
  179.      if (square == olLis.length - 1) {
  180.      square = -1;//下面会加一，就变成了0
  181.      }
  182.      square++;
  183.      //排他思想
  184.      for (var i = 0; i < olLis.length; i++) {
  185.      olLis[i].className = "";
  186.      }
  187.      olLis[square].className = "current";
  188.      }*/
  189.     //使用封装函数
  190.     right.onclick = function () {
  191.         playNext();
  192.     }
  193.     //2.设置点击左侧箭头
  194.     left.onclick = function () {//要判断一下当pic为零时的情况
  195.         if (pic == 0) {
  196.             ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要记得加单位
  197.             pic = ulLis.length - 1;//给pic重新赋一个值
  198.         }
  199.         pic--;
  200.         var target = -pic * imgWidth;
  201.         cutton(ul, target, 20);
  202.         //设置小图标样式
  203.         if (square == 0) {
  204.             square = olLis.length;
  205.         }
  206.         square--;
  207.         for (var i = 0; i < olLis.length; i++) {
  208.             olLis[i].className = "";
  209.         }
  210.         olLis[square].className = "current";
  211.     }
  212.     //设置自动滚动
  213.     //1.封装点击右侧小箭头事件
  214.     function playNext() {
  215.         //先对pic做一个判断，当pic的值为5的时候，实现一个跳转
  216.         if (pic == ulLis.length - 1) {
  217.             ul.style.left = 0;
  218.             pic = 0;
  219.         }
  220.         pic++;
  221.         var target = -pic * imgWidth;
  222.         cutton(ul, target, 20);
  223.         if (square == olLis.length - 1) {
  224.             square = -1;//下面会加一，就变成了0
  225.         }
  226.         square++;
  227.         //排他思想
  228.         for (var i = 0; i < olLis.length; i++) {
  229.             olLis[i].className = "";
  230.         }
  231.         olLis[square].className = "current";
  232.     }
  233.     //2.调用这个封装的函数，并且设置一个间歇性计时器
  234.     var timer = null;
  235.     timer = setInterval(playNext, 1000);
  236.     //封装函数
  237.     function cutton(obj, target, stp) {
  238.         clearInterval(obj.timer);
  239.         obj.timer = setInterval(function () {
  240.             var step = stp;
  241.             step = obj.offsetLeft > target ? -step : step;
  242.             if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
  243.                 obj.style.left = obj.offsetLeft + step + "px";
  244.             } else {
  245.                 obj.style.left = target + "px";
  246.                 clearInterval(obj.timer);
  247.             }
  248.         }, 15)
  249.     }
  250. </script>
  251. </body>
  252. </html>

使用原生的javascript来实现轮播图的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  3. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  4. 原生javascript之实战 轮播图

    成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...

  5. 从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

    未完待续...... 一.运动原理 通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. ...

  6. 用JavaScript制作banner轮播图

    JavaScript_banner轮播图 让我们一起来学习一下用js怎么实现banner轮播图呢? 直接看代码: <!DOCTYPE html> <html> <head ...

  7. JavaScript实现动态轮播图效果

    功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 箭头隐藏 2.动态添加底部小圆圈并绑定单击事件,并且让小圆圈的点击事件和左右箭头点击事件同步 3.拷贝第一张图片添加到ul最后可以实现动态添加图片 ...

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

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

  9. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

  1. js 常见事件

  2. Clarke Award for Imagination in Service to Society刘慈欣演讲

    刘慈欣不无批评地写道(http://cn.chinadaily.com.cn/2018-11/12/content_37243853.htm): 科幻的想象力由克拉克的广阔和深远,变成赛博朋克的狭窄和 ...

  3. android viewpager 拿到当前显示的 fragment 的实例

    一个 ViewPager 通过 FragmentPagerAdapter 绑定了 3 个 fragment 可以通过 Fragment fragment = getSupportFragmentMan ...

  4. Redis的安装(CentOS 7下)

    redis的官网,www.redis.io 1. 先下载 redis: wget http://download.redis.io/releases/redis-3.0.3.tar.gz 2. 解压: ...

  5. PHP中判断字符串是否包含某个字符时，建议使用正则表达式preg_match()

    判断字符串中是否包含 某个字符时,在java中时直接使用 indexOf()来判断的 在php中好像也要对应的,strpos(),stripos() 不过每次我用的都很不爽,老是出现各种各样的小问题, ...

  6. win10中xshell的ssh链接virtualBox中的centos7

    win10下virtualbox中centos7.3与主机通过xshell的ssh建立连接的方法 2017-02-19 01:29  版权声明:本文为博主原创文章,未经博主允许不得转载.     最近 ...

  7. ExtJs6解决添加和修改Form共用一个form的隐藏域的id的取消传值

    问题重现:修改不会有问题,id会绑定之前的grid,有具体数字 添加有问题,因为id是空,传的是绑定值的话会显示“类名-1”,从int类型变成了string类型,后台会出错 这是EduQuestion ...

  8. HDU 5690——All X——————【快速幂 | 循环节】

    All X Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  9. FZU 2138——久违的月赛之一——————【贪心】

    久违的月赛之一 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  10. 巧用hover改变css样式和背景

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