js实现轮播图效果 纯js实现图片自动切换

本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下

1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片;
2. 鼠标离开,恢复自动播放;
3. 点击下方中间几个小圆圈,也会自动切换图片;

源代码:

<!DOCTYPE html>

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }

  /* 轮播图盒子样式 */
  .lunbotu {
   position: relative;
   width: 520px;
   height: 280px;
   margin: 50px auto;
   background-color: blue;
   overflow: hidden;
  }

  /* 左右按钮样式 */
  .left,
  .right {
   display: none;
   position: absolute;
   top: 50%;
   margin-top: -15px;
   width: 30px;
   height: 30px;
   background-color: cornsilk;
   border-radius: 15px;
   text-align: center;
   line-height: 30px;
   cursor: pointer;
   z-index: 1;
  }

  .left {
   left: 0;
  }

  .right {

   right: 0;
  }

  li {
   list-style: none;
  }

  /* 设置图片的ul的样式 */
  .firstul {
   position: absolute;
   top: 0;
   left: 0;
   width: 500%;

  }

  .firstul li {
   float: left;
   /* display: none; */
  }

  /* 设置小圆圈的样式 */
  ol {
   /* width: 90px; */
   padding: 0 5px 0 5px;
   position: absolute;
   bottom: 10px;
   left: 50%;
   margin-left: -45px;
   background-color: darkgrey;
   text-align: center;
   border-radius: 9px;
  }

  ol li {
   display: inline-block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   margin-right: 5px;
   background-color: white;
   cursor: pointer;
  }

  .current {
   background-color: red;
  }
 </style>
 <script src="animation.js"></script>
</head>

<body>
 <!-- 图片大小全部是520*280 -->
 <div class="lunbotu">
  <!-- 左右按钮 -->
  <div class="left">></div>
  <div class="right"><</div>
    <!-- 图片部分 -->
    <ul class="firstul">
     <li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
     <li><a href=""><img src=" images/3.gif" alt=""> </a></li>
     <li><a href=""><img src=" images/4.webp" alt=""> </a></li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="firstol"></ol>
  </div>
  <!-- JS部分 -->
  <script>
   // 1.获取事件源
   var lunbotu = document.querySelector('.lunbotu');
   var leftBox = document.querySelector('.left');
   var rightBox = document.querySelector('.right');
   var ul = lunbotu.querySelector('ul');
   var ol = lunbotu.querySelector('ol');
   var right = document.querySelector('.right');
   var left = document.querySelector('.left');
   var lunbotuWidth = lunbotu.offsetWidth;
   // console.log(ul)
   // console.log(ol)
   // 第一步:
   // 鼠标经过轮播图的时候,左右小按钮弹出
   lunbotu.addEventListener('mouseenter', function () {
    leftBox.style.display = 'block';
    rightBox.style.display = 'block';
    // 鼠标经过轮播图的时候,停止定时器
    clearInterval(timer);
   })
   // 鼠标离开轮播图的时候,左右小按钮隐藏
   lunbotu.addEventListener('mouseleave', function () {
    leftBox.style.display = 'none';
    rightBox.style.display = 'none';
    timer = setInterval(function () {
     right.click();
    }, 2000)

   })
   // 第二步:
   // 1.动态生成小圆圈
   // 2.小圆圈的个数要跟图片一样
   // 3.先得到ul里面图片的张数(图片放入li里面,所以就是li的个数)
   // 4.利用循环动态生成小圆圈(这个小圆圈要放入ol里面)
   // 5.创建节点createElement('li')]
   // 6.插入节点ol.appendChild(li)
   // 7.第一个小圆圈需要添加current类
   for (var i = 0; i < ul.children.length; i++) {
    // 创建一个li
    var li = document.createElement('li')
    // 记录当前小圆圈的索引号 通过自定义属性来做
    li.setAttribute('index', i);
    // 把li添加到ol
    ol.appendChild(li);
   }
   // 排他思想:让小Li变白色
   for (var i = 0; i < ol.children.length; i++) {
    ol.children[i].addEventListener('click', function () {
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     } this.className = 'current';

     // 点击小圆圈的时候切换到对应的图片
     // 得到索引号 index
     var index = this.getAttribute('index');
     // 解决小bug
     num = index;
     num_ol = index;
     // console.log(lunbotuWidth);
     // console.log(index)
     animation(ul, - index * lunbotuWidth)
    })
   }
   // 给第一个li变颜色
   ol.children[0].className = 'current';
   // 克隆第一个li
   var first = ul.children[0].cloneNode(true);
   ul.appendChild(first);
   // 第三步:
   // 点击右边按钮事件
   var num = 0;
   // 点击右侧按钮的时候小圆圈跟着滚动
   var num_ol = 0;
   // 节流阀,防止点击过快,最后才加这句优化
   var flag = true;
   // 右侧按钮:
   right.addEventListener('click', function () {
    if (flag) {
     flag = false; // 关闭节流阀
     if (num == ul.children.length - 1) {
      ul.style.left = 0;
      num = 0;
     }
     num++;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol++;
     if (num_ol == ol.children.length) {
      num_ol = 0
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 左侧按钮:
   left.addEventListener('click', function () {
    if (flag) {
     flag = false;
     if (num == 0) {
      ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
      num = ul.children.length - 1;
     }
     num--;
     animation(ul, -num * lunbotuWidth, function () {
      flag = true;
     });
     num_ol--;
     // num_ol=0的时候需要,点击左侧按钮,需要转跳到ol.children.length-1的位置
     if (num_ol < 0) {
      num_ol = ol.children.length - 1
     }
     for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
     }
     ol.children[num_ol].className = 'current';
    }
   });
   // 自动播放图片
   var timer = setInterval(function () {
    right.click();
   }, 2000)
  </script>
</body>
</html>

5.Js文件的代码

// 封装了一个动画js文件
function animation(obj,target,fn1){
 // console.log(fn1);
 // fn是一个回调函数,在定时器结束的时候添加
 // 每次开定时器之前先清除掉定时器
 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);
  // 如果fn1存在,调用fn
  if(fn1){
  fn1();
  }
 }else{
  // 每50毫秒就将新的值给obj.left
 obj.style.left = obj.offsetLeft +step +'px';
 }
 },30)
}

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

(0)

相关推荐

  • js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • 用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • JS轮播图实现简单代码

    本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播

  • js实现点击左右按钮轮播图片效果实例

    本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un

  • js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • 原生js实现轮播图的示例代码

    很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea

随机推荐