DDR爱好者之家

JavaScript轮播停留效果的实现思路
站长资源 2024/11/26 佚名
64 1538
DDR爱好者之家 Design By 杰米

一、思路

1.轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播；

2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果；

二、步骤

1.写基本结构样式

需在末尾多添加一张与第一张相同的图片，消除切换时的抖动；

2.添加轮播停留事件 有了之前的基础，直接添加索引圈默认事件到轮播停留事件内；

注意：当轮播到最后一张时，需要消除掉过渡，这里使用setTimeout定时器，卡最后一张图片轮播完不延时，直接跳转到第一张，由于第一张和最后一张一样，所以会形成视觉盲区，看起来是连续轮播效果；

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

3.添加进入索引圈事件

这和淡入淡出进入索引圈事件基本一致，不同的是这里不用调用轮播停留事件，直接利用当前index来索引使图片跟随变换；注意最后要标记count=this.index值，令再次执行默认行为时是紧跟着当前显示图片向后执行默认行为；

//进入索引圈事件
for(var j=0;j<circle.length;j++){
 circle[j].index=j;
 circle[j].onmouseenter=function(){
  for(var k=0;k<circle.length;k++){
   circle[k].style.backgroundColor="";
  }
  this.style.backgroundColor="red";
  //图片跟随移动
  box.className="box anmint";
  box.style.marginLeft=(-800*this.index)+"px";
  count=this.index;
 }
}

4.完善鼠标进入离开代码

效果图：

JavaScript轮播停留效果的实现思路

完整代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>JS轮播停留效果</title> 
 <style> 
  *{margin: 0;padding: 0;} 
  html,body{width: 100%;height: 100%;} 
  .block{ 
   width: 800px; 
   height: 400px; 
   margin: 80px auto; 
   position: relative; 
   border: 1px solid red; 
   overflow: hidden; 
  } 
  .box{ 
   width: 5600px; 
   height: 400px; 
   float: left; 
  } 
  .anmint{ 
   transition: all 0.5s ease-in-out; 
  } 
  img{ 
   width: 800px; 
   height: 400px; 
   float: left; 
  } 
  .cir{ 
   width: 150px; 
   height: 20px; 
   z-index: 7; 
   position: absolute; 
   bottom: 10px; 
   left: 320px; 
  } 
  .circle{ 
   width: 10px; 
   height: 10px; 
   border: 2px solid grey; 
   border-radius: 50%; 
   float: left; 
   margin: 0 5px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var box=document.getElementsByClassName("box")[0]; 
   var count=0; 
   //索引圈事件 
   var circle=document.getElementsByClassName("circle"); 
   circle[0].style.backgroundColor="red"; 
   var time=setInterval(function(){ 
    move(); 
   },2000); 
   //鼠标进入事件 
   var block=document.getElementsByClassName("block")[0]; 
   block.onmouseenter=function(){ 
    clearInterval(time); 
   }; 
   //鼠标离开事件 
   block.onmouseleave=function(){ 
    time=setInterval(function(){ 
     move(); 
    },2000); 
   }; 
   //进入索引圈事件 
   for(var j=0;j<circle.length;j++){ 
    circle[j].index=j; 
    circle[j].onmouseenter=function(){ 
     for(var k=0;k<circle.length;k++){ 
      circle[k].style.backgroundColor=""; 
     } 
     this.style.backgroundColor="red"; 
     //图片跟随移动 
     box.className="box anmint"; 
     box.style.marginLeft=(-800*this.index)+"px"; 
     count=this.index; 
    } 
   } 
   //轮播停留方法 
   function move() { 
    box.className = "box anmint"; 
    circle[count].style.backgroundColor = ""; 
    count++; 
    box.style.marginLeft = (-800 * count) + "px"; 
    //最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换 
    setTimeout(function () { 
      if (count >= 6) { 
       count = 0; 
       box.className = "box"; 
       //marginLeft=0之前去除过渡属性 
       box.style.marginLeft = "0px"; 
      } 
     circle[count].style.backgroundColor = "red"; 
    }, 500); 
   } 
  } 
 </script> 
</head> 
<body> 
<div class="block"> 
 <div class="box"> 
   <img class="imgg" src="/UploadFiles/2021-04-02/box1.jpg">


总结


以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米