原生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 相关文章推荐
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 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学习教程之第2天
2008/06/15 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php微信公众号开发模式详解
2016/11/28 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 获得13位unix时间戳的方法
2017/10/20 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
六十岁生日答谢词
2014/01/10 职场文书
校友会欢迎辞
2014/01/13 职场文书
机关节能减排实施方案
2014/03/17 职场文书
文化活动实施方案
2014/03/28 职场文书
书香校园建设方案
2014/05/02 职场文书
个人年终总结范文
2015/03/09 职场文书
2015双创工作总结
2015/07/24 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
MySQL笔记 —SQL运算符
2022/01/18 MySQL