原生js实现无缝轮播图效果

原生js实现轮播图效果(无缝滚动) ，供大家参考，具体内容如下

效果图：

代码：

!DOCTYPE htML>
    html lang="en">
    !-- day07 7-10-14 -->
     head>
     meta charset="UTF-8">
     meta name="viewport" content="width=device-width, inITial-scale=1.0">
     title>
    Document/title>
     script src="./images1/20.aniMATE.js">
    /script>
     style>
 * {
      margin: 0;
      padding: 0;
 }
  li {
      list-style: none;
 }
  .focus {
      /*overflow: hidden;
    */  position: absolute;
      top: 100px;
      left: 200px;
      width: 721px;
      height: 455px;
      background-color: brown;
 }
  .prev, .next {
      display: none;
      position: absolute;
      top: 50%;
      margin-top: -15px;
      width: 20px;
      height: 30px;
      background-color: rgba(0, 0, 0, .3);
      text-decoration: none;
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-Size: 16px;
      z-index: 2;
 }
  .focus ul {
      /* 引入动画js文件要求必须有定位 */  position: absolute;
      width: 600%;
 }
  .focus ul li {
      float: left;
 }
  .PRev {
      left: 0;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
 }
  .next {
      right: 0;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
 }
  .promo-nav {
      position: absolute;
      bottom: 10px;
      left: 60px;
      width: 200px;
      height: 18px;
      border-radius: 9px;
 }
  .promo-nav li {
      float: left;
      width: 10px;
      height: 10px;
      background-color: #fff;
      margin: 2px;
      border-radius: 50%;
 }
  .promo-nav .current {
      background-color: orange;
 }
 .focus ul li a img {
      width: 721px;
      height: 455px;
 }
     /style>
    /head>
     body>
     div class="focus">
     ul>
      li>
      a href="#" >
    img src="images1/focu01.jpg" alt="">
    /a>
      /li>
      li>
      a href="#" >
    img src="images1/focu02.jpg" alt="">
    /a>
      /li>
       li>
      a href="#" >
    img src="images1/focu03.jpg" alt="">
    /a>
      /li>
      li>
      a href="#" >
    img src="images1/focu04.jpg" alt="">
    /a>
      /li>
      /ul>
     !-- 左侧按钮 -->
     a href="javascript:;
    " class="prev">
    &
    lt;
    /a>
     !-- 右侧按钮 -->
     a href="javascript:;
    " class="next">
    &
    gt;
    /a>
      ol class="promo-nav">
      /ol>
     /div>
     script>
 window.addEventListener('load', function() {
      VAR focus = document.querySelector('.focus');
      var prev = document.querySelector('.prev');
      var next = document.querySelector('.next');
      var focusWidth = focus.offsetWidth;
  //鼠标经过  focus.addEventListener('mouseenter', function() {
       prev.style.display = 'block';
       next.style.display = 'block';
       clearInterval(timer);
       timer = null;
 //清除定时器变量   }
)  //鼠标离开  focus.addEventListener('mouseleave', function() {
       prev.style.display = 'none';
       next.style.display = 'none';
   timer = setInterval(function() {
       next.click();
   }
, 2000)   }
    )  //3.动态生成小圆圈 有几张图片 就生成几个小圆圈  var ul = focus.querySelector('ul');
      var ol = focus.querySelector('.promo-nav');
      // console.LOG(ul.children.length);
     4  for (var i = 0;
     i  ul.children.length;
 i++) {
      //创建一个li  var li = document.createElement('li');
      //记录当前小圆圈的索引号 通过自定义属性来做  li.setattribute('index', i);
      //插入到ol后面  ol.appendChild(li);
  //4.鼠标点击小圆圈小圆圈变色(给小圆圈添加current类其余小圆圈移除这个类)(排他思想)  //在生成小圆圈的同时直接绑定点击事件  li.addEventListener('click', function() {
       for (var i = 0;
     i  ol.children.length;
 i++) {
       ol.children[i].classname = '';
   }
       this.className = 'current';
         //5.点击小圆点 移动图片 移动的是ul   //ul移动的距离 小圆圈的索引号乘以图片宽度 注意是负值   //当我们点击了某个小li就得到了当前小li的索引号   var index = this.getAttribute('index');
       //当我们点击了某个li就把li的索引号给num   num = index;
       //当我们点击了某个li就把li的索引号给index   circle = index;
       console.log(index);
        animate(ul, -index * focusWidth, );
  }
)   }
      //把ol里面的第一个li北京颜色设置成白色  ol.children[0].className = 'current';
      //6. 克隆第一张li放到ul后面  var First = ul.children[0].cloneNode(true);
      ul.appendChild(first);
      //7.点击右侧按钮图片滚动一张  var num = 0;
      var circle = 0;
      var flag = true;
  //右侧按钮  next.addEventListener('click', function() {
   if (flag) {
       flag = false;
 //先关闭节流阀   //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)   if (num == ul.children.length - 1) {
        ul.style.left = 0;
        num = 0;
   }
       num++;
   animate(ul, -num * focusWidth, function() {
        flag = true;
   }
    );
       //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化   circle++;
   //如果 circle等于4说明做到最后克隆的这张图片了 我们就复原   if (circle == ol.children.length) {
        circle = 0;
   }
       // //清除其余小圆圈类名   // for (var i = 0;
     i  ol.children.length;
 i++) {
       // ol.children[i].className = '';
   // }
       // //留下当前小圆圈current类名   // ol.children[circle].className = 'current';
       circleChange();
   }
  }
)  //左侧按钮  prev.addEventListener('click', function() {
  if (flag) {
       flag = false;
   //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动)   if (num == 0) {
       num = ul.children.length - 1;
       ul.style.left = -num * focusWidth + 'px';
    }
       num--;
   animate(ul, -num * focusWidth, function() {
       flag = true;
   }
    );
       //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化   circle--;
   //如果 circle小于0小圆圈要改为第四个小圆圈   if (circle  0) {
       circle = ol.children.length - 1;
   }
       // 清除其余小圆圈类名   // for (var i = 0;
     i  ol.children.length;
 i++) {
       // ol.children[i].className = '';
   // }
       // 留下当前小圆圈current类名   // ol.children[circle].className = 'current';
       circleChange();
  }
  }
)   function circleChange() {
      //清除其余小圆圈类名  for (var i = 0;
     i  ol.children.length;
 i++) {
       ol.children[i].className = '';
  }
      //留下当前小圆圈current类名  ol.children[circle].className = 'current';
  }
   //10.自动播放轮播图  var timer = setInterval(function() {
      next.click();
  }
, 2000)  }
    ) /script>
    /body>
     /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript实现循环轮播图
• JS原生实现轮播图的几种方法
• js编写轮播图效果
• 基于JavaScript实现简单的轮播图
• JavaScript仿京东轮播图效果
• JavaScript Dom实现轮播图原理和实例
• js实现移动端轮播图滑动切换
• javascript实现滚轮轮播图片
• 原生Js 实现的简单无缝滚动轮播图的示例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！