原生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图片轮播

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

时间: 2016-10-16

Javascript实现图片轮播效果(一)让图片跳动起来

图片轮播效果,在各大网站的首页都能看到,比较常见.下面小编给大家分享这一效果的简单实现. 1.图片跳动起来 2.图片序列控制的实现 3.前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)

本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s

原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看

基于vue.js实现图片轮播效果

轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$

JS图片轮播与索引变色功能实例详解

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

用JS实现图片轮播效果代码(一)

一.实现原理 (1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏: (2)轮播图分为手动轮播和自动轮播: 手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示: 自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片. (3)所有的基础知识:dom操作,定时器,事件运用. 二.轮播图页面布局: <div id="content"> <!-- 总的父

js实现图片轮播效果

本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下 运行代码如下 具体代码如下 插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

js支持键盘控制的左右切换立体式图片轮播效果代码分享

本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍:      1.轻松的改变幻灯变的宽度.      2.轻易改变下一张展示图片的数量.      3.最后一张图片会循环回到第一张图片里.      4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:                   

js淡入淡出的图片轮播效果代码分享

本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i

js带缩略图的图片轮播效果代码分享

本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q

js实现图片轮播效果学习笔记

本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过

JS实现图片轮播效果实例详解【可自动和手动】

本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换  3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g

jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果. 1. 不做操作时,自动轮播  2. 鼠标悬浮在图片上时,停止自动轮播,隐藏在图片左右的箭头会显示出来  3. 手动轮播1:鼠标指向图片底部的小标按钮,可以切换对应的图片  4. 手动轮播2:点击左右箭头也可以切换图片 效果图:(PS:用软件捕捉的,不太会弄,感觉图片都失真了) 下面是代码区域: **inde.html部分代码** <div class="box"> <ul class="img">

原生javascript实现图片轮播效果代码

看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI