原生JS运动实现轮播图


Posted in Javascript onJanuary 02, 2021

原生JS运动实现轮播图

**基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果。

运动函数的实现

函数需传入元素(即需要参与运动的元素)、目标值(以对象的形式呈现,如{left: 300})、callback(回调函数)。

//多物体多值运动+回调机制
function startMove(dom, attrObj, callback) {
 var key = true;
 var iSpeed = null,
  iCur = null;
 clearInterval(dom.timer);
 if (key) {
  dom.timer = setInterval(function() {
  //bStop用来判断是否开始执行回调函数
   var bStop = true;
   //判断传入目标值中的“键”类型是否为opacity
   for (var attr in attrObj) {
   //若要改变的样式为opacity,则将元素的opacity扩大100被进行操作
    if (attr === 'opacity') {
     iCur = parseFloat(getStyle(dom, attr)) * 100;
    } else {
     iCur = parseInt(getStyle(dom, attr));
    }
    //运动速度设为目标值减去当前值的一半,即当前状态离目标值越接近,运动速度越小
    iSpeed = (attrObj[attr] - iCur) / 2;
    //对速度进行取整
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    if (attr === 'opacity') {
     dom.style.opacity = (iCur + iSpeed) / 100;
    } else {
     dom.style[attr] = iCur + iSpeed + 'px';
    }
    if (iCur !== attrObj[attr]) {
     bStop = false;
    }
   }
   //当bStop为true时,元素的所有样式均已达到目标值,清理定时器并执行回调函数
   if (bStop) {
    clearInterval(dom.timer);
    typeof callback == 'function' && callback();
   }
  }, 30)
 }
 if (!key) {

 }
}
//用来获取元素实时的样式值
function getStyle(elem, prop){
 if (window.getComputedStyle){
  return window.getComputedStyle(elem, null)[prop];
 }
}

HTML部分

HTML中包含一个div,用来显示当前要播放的图片,该div中又包含一个ul(用来存放所有包含图片的li)、三个div(其中两个充当图片左右切换的按钮,第三个存放图片索引点,通过点击索引也可切换到要查看的图片),代码如下:

<div class="wrapper">
 <ul class="sliderPage">
  <li>
   <img src="./image/dog/阿拉斯加.jpeg"/>
  </li>
  <li>
   <img src="./image/dog/比熊.jpeg"/>
  </li>
  <li>
   <img src="./image/dog/边牧.jpeg"/>
  </li>
  <li>
   <img src="./image/dog/柯基.jpeg"/>
  </li>
  <li>
   <img src="./image/dog/阿拉斯加.jpeg"/>
  </li>
 </ul>
 <div class="btn leftBtn"><</div>
 <div class="btn rightBtn">></div>
 <div class="sliderIndex">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
 </div>
</div>

CSS代码

此处采用的为内联样式表

<style>
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }
 .wrapper{
  position: relative;
  margin: 100px auto 0;
  width: 600px;
  height: 360px;
  overflow: hidden;
 }
 .wrapper .sliderPage{
  position: absolute;
  left: 0;
  width: 3000px;
  height: 360px;
 }
 .wrapper .sliderPage li{
  width: 600px;
  height: 360px;
  float: left;
 }
 .wrapper .sliderPage li img{
  width: 100%;
  height: 100%;
 }
 .btn{
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  background-color: #000;
  opacity: 0.2;
  cursor: pointer;
 }
 .leftBtn{
  left: 5px;
 }
 .rightBtn{
  right: 5px;
 }
 .wrapper:hover .btn{
  opacity: 0.8;
 }
 .sliderIndex{
  position: absolute;
  width: 100%;
  bottom: 10px;
  cursor: pointer;
  text-align: center;
 }
 span{
  width: 8px;
  height: 8px;
  background-color: #cccccc;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
 }
 .active{
  background-color: orange;
 }
</style>

图片自动运动及点击运动事件绑定

要点:

1、当图片运动到最后一张时(显示图片为第一张图片),将ul的left值设为0即可实现无限轮播;
2、图片每次运动的值为li的宽度;
3、图片的运动需要一定的时间,因此在图片运动过程中应禁止产生其它定时器,否则会造成运动尺寸混乱而导致图片轮播出现问题,这里用lock来进行实现,在ul运动过程中将lock值设为false,运动结束后又将lock值设为true;
4、通过index值来实现索引显示图片功能,图片轮播过程中,index初始值为0,当图片向右轮播时index值加1,图片向左轮播时,index值减1,index值为0时,若让图片向左轮播,则将index值设为n(li个数)并进行轮播,而当index值为3且图片向右轮播时,在ul运动完成后将index值设为0;

var timer = null;
var sliderPage = document.getElementsByTagName('ul')[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length - 1;
var leftBtn = document.getElementsByClassName('leftBtn')[0];
var rightBtn = document.getElementsByClassName('rightBtn')[0];
var lock = true;
var index = 0;
var indexArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
//索引切换
for (var i = 0; i < indexArray.length; i ++){
 (function(myindex){
  indexArray[myindex].onclick = function(){
   lock = false;
   clearTimeout(timer);
   index = myindex;
   changeIndex(index);
   startMove(sliderPage, {left: -index * moveWidth}, function(){
    lock = true;
    timer = setTimeout(autoMove, 3000);
   })
  }
 }(i))
}
//图片运动过程中改变index点的样式
function changeIndex(index){
 for (var i = 0; i < indexArray.length; i++){
  indexArray[i].className = '';
 }
 indexArray[index].className = 'active';
}
timer = setTimeout(autoMove, 3000);
//向左翻
leftBtn.onclick = function (){
 autoMove('right->left');
}
//向右翻
rightBtn.onclick = function (){
 autoMove('left->right');
}
//direction
//默认轮播方向 'left->right' / undefined
//点击left按钮 'right->left'
function autoMove(direction){
 clearTimeout(timer);
 if (lock){
  lock = false;

  if (!direction || direction === 'left->right'){
   index++;
   startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function(){
    if (sliderPage.offsetLeft === - num * moveWidth){
     index = 0;
     sliderPage.style.left = '0px';
    }
    timer = setTimeout(autoMove, 3000);
    lock = true;
    changeIndex(index);
   });
  }else if(direction === 'right->left'){
   if (sliderPage.offsetLeft === 0){
    index = num;
    sliderPage.style.left = - num * moveWidth + 'px';
   }
   index--;
   startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
    timer = setTimeout(autoMove, 3000);
    lock = true;
    changeIndex(index);
   })
  }
 }
}

以上即为通过原生JS运动所实现的图片轮播。

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

Javascript 相关文章推荐
jquery选择器使用详解
Apr 08 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
webpack打包多页面的方法
Nov 30 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 #Javascript
JS+CSS实现过渡特效
Jan 02 #Javascript
jQuery实现全选按钮
Jan 01 #jQuery
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
vue 动态创建组件的两种方法
Dec 31 #Vue.js
Vue 修改网站图标的方法
Dec 31 #Vue.js
You might like
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
深入浅析javascript函数中with
2018/10/28 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python内置模块collections知识点总结
2019/12/19 Python
详解Python设计模式之策略模式
2020/06/15 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
如何利用find命令查找文件
2015/02/07 面试题
咖啡书吧创业计划书
2014/01/13 职场文书
安全生产检讨书
2014/01/21 职场文书
双语教学实施方案
2014/03/23 职场文书
捐款倡议书
2014/04/14 职场文书
临床护理求职信
2014/04/26 职场文书
入党介绍人考察意见
2015/06/01 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
javascript数组includes、reduce的基本使用
2021/07/02 Javascript