韦德国际1946国际网址:原生JS达成匀速图片轮播

作者: 韦德国际1946国际网址  发布:2019-07-01

JS实现轮播图完毕结果图:

原生JS实现匀速图片轮播动画,js匀速

JS完毕轮播图完成结果图:

韦德国际1946国际网址 1

需求:
1 依据图片动态增进小圆点
2 目的活动到小圆点轮播图片
韦德国际1946国际网址:原生JS达成匀速图片轮播动画,JS完毕匀速动画。3 鼠标离开图片,按期轮播图片;鼠标在图片上时暂停
4  左右两侧可点击轮播图片    

一、布局地分

html部分

<div class="w main clearfix"><!--主内容部分开始-->
<div class="slider"><!--轮播图部分开始-->
  <ul class="imgs" id="slider_imgs">
   <li><img src="images/slider01.jpg" id="slider1" alt="韦德国际1946国际网址 2"/>
   </li>
   <li><img src="images/slider02.jpg" id="slider2" alt="韦德国际1946国际网址 3"/>
   </li>
   <li><img src="images/slider03.jpg" id="slider3" alt="韦德国际1946国际网址 4"/>
   </li>
   <li><img src="images/slider04.jpg" id="slider4" alt="韦德国际1946国际网址 5"/>
   </li>
   <li><img src="images/slider05.jpg" id="slider5" alt="韦德国际1946国际网址 6"/>
   </li>
   <li><img src="images/slider01.jpg" id="slider0" alt="韦德国际1946国际网址 7"/>
   </li>
  </ul>
   <div class="arrow" id="arrow">
    <a href="javascript:;" class="arrow_1"><</a>
    <a href="javascript:;" class="arrow_2">></a>
   </div>
 </div><!--轮播图部分结束-->
 </div>

css部分

.slider ul.imgs{height:453px;width:4380px;position:absolute;}
.slider ul.imgs li{display:block; width:730px;height:453px;float:left;}
.slider .circle{position:absolute;left:50%;bottom:8px;}
.slider .circle li{cursor:pointer;float:left;width:18px;height:18px;margin:4px;background-color:#3e3e3e;border-radius: 50%;text-align: center;color:#fff;}
.slider .circle li.current{background:pink;color:white;}

JS部分

1那是匀速动画函数的包裹

/*
***obj:做动画的DOM对象
***target:对象最终运动到的目标位置(X轴)
*/
function animate(obj,target) {

//每次调用要先清定时器
    clearInterval(obj.Timer);

//根据目标位置判断移动的方向,每到目标位置步长为20,否则为-20
    var speed = target>obj.offsetLeft?20:-20;

    obj.Timer =setInterval(function () {

      var left = obj.offsetLeft;

      obj.style.left = left speed "px";

      var result = target-left;

//目标位置与当前位置在步长20以内,则到达目标位置
      if(Math.abs(result)<=20){

//停止运动
        clearInterval(obj.Timer);

//有20像素差距  我们直接跳转目标位置
        obj.style.left=target  "px";

     }

    },2函数:

`这里写代码片0);

  }

轮播图封装函数:

function slider(){
      //焦点图信息DOM节点
      var imgs=document.getElementById("slider_imgs");
      var slides =imgs.parentNode;
      var lis =imgs.getElementsByTagName("li");
      var arrows = document.getElementById("arrow");
      var arrowLink=arrows.children;
      //创建小圆点
      var circle=document.createElement("ol");
      circle.setAttribute("class","circle");
      imgs.parentNode.appendChild(circle);

      for(var i=0,len=lis.length-1;i<len;i  ){
        var li =document.createElement("li");
        li.innerHTML = i 1;
        circle.appendChild(li);
      }
      //marginLeft=-imgli(length)*olLi(width)/2
      circle.style.marginLeft = (-13*len) "px";
      var olLis =circle.children;

      olLis[0].className="current";
      //为小圆点添加鼠标事件
      for(var i=0;i<olLis.length;i  ){
    //当前小圆点索引
        olLis[i].index = i;
        olLis[i].onmouseover=function () {

          for(var j=0;j<olLis.length;j  ) {
            olLis[j].className = "";
          }
          this.className="current";
          //图片切换 imgs的CSS部分加上定位
          animate(imgs,this.index*(-lis[0].offsetWidth));
     //当鼠标挪到定时器,当前播放图片与原点位置回原
          k=z=p=q=this.index;

        };


      }

//鼠标移动到轮播图,不定时播放
      slides.onmouseover=function () {
 //清除自动轮播定时器
        clearInterval(Time);
      };
//鼠标移开,自动轮播        
      slides.onmouseout=function () {
        Time =setInterval(autoPlay,1000);
      };
//定时器部分      
      var Time=null,k=0,z=0;
      Time=setInterval(autoPlay,1000);
      //自动轮播图片,定时器Time
      function autoPlay() {
        k  ;
        if(k>lis.length-1){
          imgs.style.left=0;
          k=1;
        }
        animate(imgs,k*(-lis[0].offsetWidth));
        z  ;
        if(z>olLis.length-1){
          z=0;
        }
        for(var j=0;j<olLis.length;j  ) {
          olLis[j].className = "";
        }
        olLis[z].className="current";
      }
      var q=0;var p=0;
      arrowLink[1].onclick=function () {
        q  ;
        if(q>lis.length-1){
          imgs.style.left=0;
          q=1;
        }
        p  ;
        if(p>olLis.length-1){
          p=0;
        }
        for(var j=0;j<olLis.length;j  ) {
          olLis[j].className = "";
        }
        olLis[p].className="current";
        animate(imgs,q*(-lis[0].offsetWidth));
      }


    }

 以上正是本文的全体内容,希望对我们的就学抱有扶助,也意在大家多多援救帮客之家。

JS达成轮播图完毕结果图: 供给: 1 依照图片动态拉长小圆点 2 指标活动到小圆点轮播图片 3 鼠标离...

摘自:http://www.jb51.net/article/95211.htm

后面页面需求图片轮播的时候,都以直接在英特网找三个插件,然后本身动手改一下,把图纸的路径改成温馨图片的门路,然后高枕无忧。后来以为这么并无法增高自身的前端水平,于是乎,自个儿入手写了三个图纸轮播的小demo,用的是jquery,二弟前端小白一个,各位前端大神看了现在,望谈论指正。

韦德国际1946国际网址 8

1、匀速运动首要达成原理:

通过setInterval函数调控每n纳秒运动的距离x,在就要达到钦定地方时,判定步长x于此刻距目的地方的离开distance。借使x>distance,则一向定位到指标地点,那样做是为着防止步长和总距离不是整好几倍关系而产生最后达到地方和目的地点有差值的不当。

自家的笔触是这么的,定义多少个变量,二个用于保存当前页码$index,二个用于保存上一页的页码$exdex,首先决断$index和$exdex的高低,如若$index大于$exdex,表达是朝左翻页,反之,正是朝右翻页。纵然是朝左翻页,就把当前页朝左偏移百分百的宽度,让下一页一样朝左偏移百分之百开间。以下是代码部分:

需求:
1 依据图片动态增进小圆点
2 目的活动到小圆点轮播图片
3 鼠标离开图片,定期轮播图片;鼠标在图纸上时停顿
4  左右两侧可点击轮播图片    

2、缓冲运动重要实现原理:

缓冲运动的中坚函数是和匀速运动一样的,只是缓冲运动的幅度大家是经过和目的地点的距离来规定的,那样我们的小幅是绵绵变小的,从而完结缓冲运动的机能。在规定步长的时候我们使用Math.ceil和Math.floor对步长值进行取整是为了幸免出现小数,因为要是出现小数后边最终达到的岗位一定是和指标地点有误差的。

html部分:

<body> 
  <input type="button" value="匀速移动" id="move1"> 
  <input type="button" value="渐变移动" id="move2"> 
  <div id="box1" class="box"></div> 
  <div id="box2" class="box"></div> 
  <script type="text/javascript" src="move1.js"></script> 
</body> 

css部分:

*{ 
  margin: 0px; 
  padding: 0px; 
} 
.box{ 
  width: 100px; 
  height: 100px; 
  background-color: green; 
  position: relative; 
  margin-top: 10px; 
}

js部分:

window.onload=function () { 
  var btn1 = document.getElementById('move1'); 
  var btn2 = document.getElementById('move2'); 
  var box1 = document.getElementById('box1'); 
  var box2 = document.getElementById('box2'); 
  btn1.onclick = function () { 
    animate1(box1,500); 
  } 
  btn2.onclick = function () { 
    animate2(box2,500); 
  } 
  //匀速动画 
  function animate1(ele,target){ 
    //要用定时器,先清除定时器 
    //一个盒子只能有一个定时器,这样儿的话,不会和其他盒子出现定时器冲突 
    //而定时器本身讲成为盒子的一个属性 
    clearInterval(ele.timer); 
    //我们要求盒子既能向前又能向后,那么我们的步长就得有正有负 
    //目标值如果大于当前值取正,目标值如果小于当前值取负 
    var speed = target>ele.offsetLeft?3:-3; 
    ele.timer = setInterval(function () { 
      //在执行之前就获取当前值和目标值之差 
      var val = target - ele.offsetLeft; 
      ele.style.left = ele.offsetLeft   speed   "px"; 
      //目标值和当前值只差如果小于步长,那么就不能再前进了 
      //因为步长有正有负,所有转换成绝对值来比较 
      console.log(val); 
      if(Math.abs(val)<=Math.abs(speed)){ 
        ele.style.left = target   "px"; 
        clearInterval(ele.timer); 

      } 
    },30); 
  } 

  //缓动动画封装 
  function animate2(ele,target) { 
    clearInterval(ele.timer); //清楚历史定时器 
    ele.timer = setInterval(function () { 
      //获取步长 确定移动方向(正负值) 步长应该是越来越小的,缓动的算法。 
      var step = (target-ele.offsetLeft)/10; 
      //对步长进行二次加工(大于0向上取整,小于0项下取整) 
      step = step>0?Math.ceil(step):Math.floor(step); 
      //动画原理: 目标位置 = 当前位置   步长 
      console.log(step); 
      ele.style.left = ele.offsetLeft   step   "px"; 
      //检测缓动动画有没有停止 
      if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){ 
        ele.style.left = target   "px"; //直接移动指定位置 
        clearInterval(ele.timer); 
      } 
    },30); 
  } 


} 
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .banner{
      width:300px;
      height:250px;
      position: relative;
      z-index: 100;
      background: skyblue;
      margin:100px auto;
      overflow:hidden ;
    }

    .banner .first{
      left:0;
    }
    .banner a{
      width: 100%;
      height: 100%;
      position: absolute;
      display:block;
      top:0;
      left:100%;
    }
    .banner a img{
      width: 100%;
      height: 100%;
    }
    .banner .pre{
      position: absolute;
      left:0;
      top:120px;
      background: gray;
      width:30px;
      height:30px;
      border-radius: 30px;
      line-height: 30px;
      text-align: center;
      opacity: 0.4;
      z-index: 1000;
      cursor: pointer;
    }
    .banner .next{
      position: absolute;
      right:0;
      top:120px;
      background: gray;
      width:30px;
      height:30px;
      border-radius: 30px;
      line-height: 30px;
      text-align: center;
      opacity: 0.4;
      z-index: 1000;
      cursor: pointer;
    }
    .choose{
      position: absolute;
      width:100px;
      height:20px;
      bottom:10px;
      left:90px;
      z-index: 1000;
    }
    .choose span{
      display: block;
      float: left;
      margin-left:15px;
      width:10px;
      height:10px;
      border-radius: 10px;
      background: blue;
      cursor: pointer;
    }
    .choose .red{
      background: red;
    }
  </style>
</head>
<body>
  <div class="banner">
    <=
    =>
    <a href="#" class="first"><img src="./1.jpg" alt="韦德国际1946国际网址 9"/></a>
    <a href="#"><img src="./2.jpg" alt="韦德国际1946国际网址 10"/></a>
    <a href="#"><img src="./3.jpg" alt="韦德国际1946国际网址 11"/></a>
    <a href="#"><img src="./4.jpg" alt="韦德国际1946国际网址 12"/></a>
    <div class="choose">




    </div>
  </div>
</body>
<script src="./jquery.min.js"></script>
<script>
  var $index = 0;
  var $exdex = 0;
  $('.choose span').mouseover(function(){
    $index = $(this).index();
    $('.choose span').eq($index).addClass("red").siblings().removeClass("red");
    if($index > $exdex) {
      next();
    } else {
      pre();
    }
    return $exdex = $index;
  });

  function next() {
    $('.banner a').eq($index).stop(true,true).css('left',"100%").animate({"left":0});
    $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"-100%"});
  }

  function pre() {
    $('.banner a').eq($index).stop(true,true).css('left',"-100%").animate({"left":"0"});
    $('.banner a').eq($exdex).stop(true,true).css('left',"0").animate({"left":"100%"});
  }
</script>
</html>

一、布局部分

如上便是本文的全部内容,希望对大家的上学抱有帮忙,也指望我们多多帮助脚本之家。

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:原生JS达成匀速图片轮播

关键词: