基于JavaScript实现简单的轮播图

本文实例为大家分享了JavaScript实现简单的轮播图的具体代码，供大家参考，具体内容如下

js轮播图实现思路

1、先获取元素 盒子 左右按钮
2、鼠标经过 显示/隐藏 左右侧按钮
3、动态生成小圆圈、 添加自定义属性
4、小圆圈点击事件 添加current类名
5、添加动画事件 aniMATE 等于 -索引号*focusWidth
6、克隆第一张图片到最后面
7、添加右侧/左侧按钮点击事件
8、设置定时器 手动调用右侧按钮点击事件

htML代码部分

!DOCTYPE html>
    html lang="en">
    head>
     meta charset="UTF-8">
     meta http-equiv="X-UA-Compatible" content="IE=Edge">
     meta name="viewport" content="width=device-width, inITial-scale=1.0">
     title>
    Document/title>
     link rel="stylesheet" href="css/index.css" >
     script src="js/index.js">
    /script>
    /head>
    body>
     div class="focus">
     a href="javascript:;
    " class="arrow_r">
    >
    /a>
     a href="javascript:;
    " class="arrow_l">
      /a>
      ul>
       li>
       a href="">
    img src="images/focus.jpg" alt="">
    /a>
       /li>
       li>
       a href="">
    img src="images/focus1.jpg" alt="">
    /a>
       /li>
       li>
       a href="">
    img src="images/focus2.jpg" alt="">
    /a>
       /li>
       li>
       a href="">
    img src="images/focus3.jpg" alt="">
    /a>
       /li>
      /ul>
      ol class="circle">
      /ol>
     /div>
    /body>
    /html>
    

css样式部分

* {
     padding: 0;
     margin: 0;
 }
  li {
     list-style: none;
 }
  img {
     border: 0;
     vertical-align: top;
 }
  a {
     text-decoration: none;
 }
  .focus {
     position: relative;
     width: 721px;
     height: 455px;
     margin: 100px auto;
     overflow: hidden;
 }
  .focus ul {
     position: absolute;
     top: 0;
     left: 0;
     width: 600%;
 }
  .focus ul li {
     float: left;
 }
  .arrow_r, .arrow_l {
     display: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     line-height: 40px;
     text-align: center;
     font-Size: 24px;
     background: rgba(0, 0, 0, .2);
     color: #fff;
     z-index: 1;
 }
  .arrow_r {
     right: 0;
 }
  .circle {
     position: absolute;
     bottom: 10px;
     left: 50px;
 }
  .circle li {
     float: left;
     width: 8px;
     height: 8px;
     border: 2px solid rgba(255, 255, 255, .5);
     border-radius: 50%;
     margin: 0 3px;
     cursor: pointer;
 }
  .current {
     background-color: #fff;
 }
    

javascript部分

window.addEventListener('load', function() {
     //获取元素 VAR focus = document.querySelector('.focus');
     var arrow_r = document.querySelector('.arrow_r');
     var arrow_l = document.querySelector('.arrow_l');
     var focusWidth = focus.offsetWidth;
 // 鼠标经过focus盒子 显示/隐藏 左右侧按钮 暂停轮播 focus.addEventListener('mouseenter', function() {
     arrow_r.style.display = 'block';
     arrow_l.style.display = 'block';
     clearInterval(timer);
     timer = null;
 }
    );
 focus.addEventListener('mouseleave', function() {
     arrow_r.style.display = 'none';
     arrow_l.style.display = 'none';
 timer = setInterval(function() {
      //调用点击事件  arrow_r.click();
 }
    , 2000);
 }
    );
     //动态生成小圆圈 var ul = focus.querySelector('ul');
     var ol = focus.querySelector('.circle');
     for (var i = 0;
     i  ul.children.length;
 i++) {
     var li = document.createElement('li');
     li.setattribute('index', i);
     ol.appendChild(li);
 //小圆圈点击事件 li.addEventListener('click', function() {
      for (var i = 0;
     i  ol.children.length;
 i++) {
      ol.children[i].classname = '';
  }
      var index = this.getAttribute('index');
      num = index;
      circle = index;
      this.className = 'current';
      animate(ul, -index * focusWidth);
 }
) }
     ol.children[0].className = 'current';
     //克隆第一张图片放到最后一张 var fis = ul.children[0].cloneNode(true);
     ul.appendChild(fis);
     //右侧按钮点击事件 var num = 0;
     var circle = 0;
 arrow_r.addEventListener('click', function() {
 if (num === ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
 }
     num++;
     animate(ul, -num * focusWidth);
     circle++;
 if (circle === ul.children.length - 1) {
      circle = 0;
 }
     for (var i = 0;
     i  ol.children.length;
 i++) {
      ol.children[i].className = '';
 }
     ol.children[circle].className = 'current';
 }
    );
 //左侧按钮点击事件 arrow_l.addEventListener('click', function() {
 if (num == 0) {
      num = ul.children.length - 1;
      ul.style.left = -num * focusWidth + 'px';
 }
     num--;
     animate(ul, -num * focusWidth);
     circle--;
     circle = circle  0 ? ol.children.length - 1 : circle;
     // 调用函数 circleChange();
 }
    );
 //清除其余小圆圈的current类名 function circleChange() {
     for (var i = 0;
     i  ol.children.length;
 i++) {
      ol.children[i].className = '';
 }
     // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current';
 }
 //动画函数 function animate(obj, target, callback) {
     clearInterval(obj.timer);
 obj.timer = setInterval(function() {
      var step = (target - obj.offsetLeft) / 10;
      step = step >
     0 ? Math.ceil(step) : Math.floor(step);
  if (obj.offsetLeft == target) {
      clearInterval(obj.timer);
      callback &
    &
     callback();
  }
      obj.style.left = obj.offsetLeft + step + 'px';
 }
    , 15);
 }
 //自动轮播放轮播图 var timer = setInterval(function() {
     //调用点击事件 arrow_r.click();
 }
    , 2000);
}
    );
    

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

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

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