网页轮播图——原生JS_move image-CSDN博客

本文链接：https://blog.csdn.net/qq_41557293/article/details/99702939

网页轮播图——原生JS

1.使用onmouseenter();onmouseleave();这两个方法对左右箭头进行显示与隐藏的操作。并且实现光标移上时显示左右箭头，光标离开时隐藏左右箭头。
2.声明变量Timer代表轮播一次图片所用的时间。
3.声明变量TimerLittle代表轮播一小次图片所用时间。因为图片的移动都是一点点移动的！
4.声明MoveImage(dis);函数，并给予参数，参数代表轮播一次图片的距离，即：一张图片的宽度，dis为负值代表向右移动，为正值代表向左移动。
5.声明变量LittleDis代表图片移动一小次的距离，计算公式为：dis/(Timer/TimeLittle)l;
6.声明变量TargetDis代表目标距离，计算公式为：图片当前的距离左边的距离 + 传进来的参数dis;
7.使用定时器Setinterval();方法对图片进行过渡动画操作。
8.进行判断当当前位置小于目标距离并且目标距离小于等于0 代表向左移动，当当前位置大于目标距离并且目标距离小于0 代表向右移动。当当前位置等于目标距离时代表移动完毕！！！

不好的地方还请各位大神提出！！！

	 **还有一些细节 请各位自行理解吧！源码注释的很详细！！！**

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>网页轮播图</title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
 </head>
 <body>
  <div class="Imagelunbo" id="Image_lunbo">
   <div class="jiantou" id="jiantou">
    <img id="left_jiantou" src="img/left.png" >
    <img id="right_jiantou" src="img/right.png" >
   </div>
   <div class="main" id="main">
    <img src="img/3.jpg" >
    <img src="img/1.jpg" >
    <img src="img/2.jpg" >
    <img src="img/3.jpg" >
    <img src="img/1.jpg" >
   </div>
   <div style="width: 100px; margin: 0 auto;">
    <ul class="list" id="list">
     <li class="active"></li>
     <li></li>
     <li></li>
    </ul>
   </div>
  </div>
 </body>
</html>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

*{
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
}
.Imagelunbo{
 width: 1100px;
 height: 600px;
 position: relative;
 margin: 50px auto;
 overflow: hidden;
}
.Imagelunbo .main{
 position: absolute;
 left: -1100px;
 width: 5500px;
 height: 600px;
}
.Imagelunbo .main img{
 width: 1100px;
 height: 600px;
 float: left;
}
.jiantou img{
 position: absolute;
 z-index: 2;
 width: 1100px;
 top: 50%;
 margin-top: -65px;
 background-color: rgba(0,0,0,0.2);
 width: 100px;
 height: 110px;
 cursor: pointer;
}
.jiantou img:hover{
 background-color: rgba(0,0,0,0.3);
}
#right_jiantou{
 right: 0;
}
.list{
 position: absolute;
 bottom: 10px;
 width: 100px;
 height: 15px;
 border-radius: 15px;
 background-color:rgba(255,255,255,0.3);
}
.list li{
 width: 9px;
 height: 9px;
 border-radius: 10px;
 background-color: #ccc;
 float: left;
 margin:3px 12px;
 cursor: pointer;
}
.active{
 background-color: orangered !important;
}

var jiantou = document.getElementById('jiantou'),//获取左右箭头
 Imagelunbo = document.getElementById('Image_lunbo');//获取最大的父盒子
window.onload = function(){//网页打开时页面的状态
 jiantou.style.display = 'none';//默认为左右箭头隐藏
 jiantouShow();//调用左右箭头显示与隐藏的放法
 if(Timer == null){
  Timer = setInterval(AutoCut,2000);//自动轮播的延时
 }
}
function jiantouShow(){//将左右箭头显示与隐藏封装成方法
 Imagelunbo.onmouseenter = function(){//光标移上时
  jiantou.style.display = 'block';//左右箭头显示
  clearInterval(Timer);//停止自动轮播
  Timer = null;
 }
 Imagelunbo.onmouseleave = function(){//光标离开时
  jiantou.style.display = 'none';//左右箭头隐藏
  if(Timer == null){//开始自动轮播
   Timer = setInterval(AutoCut,2000);
  }
 }
}
var left_jiantou = document.getElementById('left_jiantou'),//获取左箭头
 right_jiantou = document.getElementById('right_jiantou');//获取右箭头
 left_jiantou.onclick = function(){
  ImageMove(1100);//向左移动
 };
 right_jiantou.onclick = function(){
  ImageMove(-1100);//向右移动
 };
var Time = 1000,//轮播一次所需时间
 LittileTime = 20,//一小次所需时间
 interval = null,//定时器
 main = document.getElementById('main');
function ImageMove(Dis){
 var LittleDis = Dis/(Time/LittileTime),//轮播一小次所需距离
  TargetDis = Dis + main.offsetLeft;//目标距离
  function MoveTo(){
   if(main.offsetLeft < TargetDis && TargetDis <= 0){//目标在左侧
    main.style.left = main.offsetLeft + LittleDis + 'px';
   }else if(main.offsetLeft > TargetDis && TargetDis < 0){//目标在右侧
    main.style.left = main.offsetLeft + LittleDis + 'px';
   }else{//到达目标点
    main.style.left = TargetDis + 'px';
    clearInterval(interval);//清空计时器
    interval = null;//将计时器设置为null节约资源
    ImageContinue();//调用图片切换的连续性方法
    ChanageColor();//调用改变索引颜色方法
   }
  }
 if(interval == null){//启动定时器
  interval = setInterval(MoveTo,LittileTime);
 }
}
function ImageContinue(){//将图片切换的连续性封装成方法
 if(main.offsetLeft == 0){
  main.style.left = -3300 + 'px';
 }else if(main.offsetLeft == -4400){
  main.style.left = -1100 + 'px';
 }
}
var value = 0,//设置代表上一个索引的下标
 list = document.getElementById('list').getElementsByTagName('li');//获取所有索引点
for(var i = 0;i < list.length;i++){
 (function(j){//立即执行函数，直接获得点击的下标。
  list[j].onclick = function(){
   var num = (j - value) * -1100;//计算当前下标与点击下标的距离差
   value = j;//将当前下标赋值给上一个下标
   ImageMove(num);//传进距离差执行轮播
  }
 })(i);
}
function ChanageColor(){//将根据图片该变索引颜色封装成方法
 var ArrayLocation = [-1100,-2200,-3300];//三张图片目标距离
 for(var i= 0;i < ArrayLocation.length;i++){
  if(main.offsetLeft == ArrayLocation[i]){//如果当前距离等于第i个距离
   list[i].className = 'active';//就给list第i个添加类，因为下标和图片是相对的关系。
  }else{
   list[i].className = '';//否则删除类
  }
 }
}
function AutoCut(){//将图片的自动切换封装成方法
 ImageMove(-1100);
}
var Timer = null;//控制自动切换图片的定时器