原生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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
原生JS实现音乐播放器
Jan 26 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
分享一个php 的异常处理程序
2014/06/22 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vuex 的简单使用
2018/03/22 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
Python模块 _winreg操作注册表
2020/02/05 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
春风行动实施方案
2014/03/28 职场文书
建筑节能汇报材料
2014/08/22 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
受资助学生感谢信
2015/01/21 职场文书
护林员个人总结
2015/03/04 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电