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

(编辑：jimmy 日期: 2024/11/7 浏览：3 次 )

本文实例为大家分享了纯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="/UploadFiles/2021-04-02/animation.js">

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)
}


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

上一篇：Vue将props值实时传递并可修改的操作
下一篇：vue 子组件watch监听不到prop的解决

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

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