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


Posted in Javascript onOctober 18, 2016

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

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

需求:
1 根据图片动态添加小圆点
2 目标移动到小圆点轮播图片
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=""/>
  </li>
  <li><img src="images/slider02.jpg" id="slider2" alt=""/>
  </li>
  <li><img src="images/slider03.jpg" id="slider3" alt=""/>
  </li>
  <li><img src="images/slider04.jpg" id="slider4" alt=""/>
  </li>
  <li><img src="images/slider05.jpg" id="slider5" alt=""/>
  </li>
  <li><img src="images/slider01.jpg" id="slider0" alt=""/>
  </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));
   }


  }

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
javascript常用方法总结
May 14 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
js实现下拉菜单效果
Mar 01 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
原生js实现网易轮播图效果
Apr 10 #Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 #Javascript
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 #Javascript
jquery中用jsonp实现搜索框功能
Oct 18 #Javascript
You might like
php intval的测试代码发现问题
2008/07/27 PHP
需要发散思维学习PHP
2009/06/29 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python实现狄克斯特拉算法
2019/01/17 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python实现ping命令小程序
2020/12/28 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
秋季运动会活动方案
2014/02/05 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
新兵入伍决心书
2015/09/22 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL