js实现从左向右滑动式轮播图效果


Posted in Javascript onJuly 07, 2017

轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法。

原理

相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片。

js实现从左向右滑动式轮播图效果

点击查看效果

html部分

nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类;第二个ul列表#img为图片列表。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Carousel Figure</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
  </head>
  <body>
  <!--从左向右滑动-->
    <nav>
      <ul id="index">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul id="img">
        <li><img src="../images/img1.jpg" alt="img1"></li>
        <li><img src="../images/img2.jpg" alt="img2"></li>
        <li><img src="../images/img3.jpg" alt="img3"></li>
        <li><img src="../images/img4.jpg" alt="img4"></li>
        <li><img src="../images/img5.jpg" alt="img5"></li>
      </ul>
    </nav>
  <script src="script.js"></script>
  </body>
  </html>

css部分

图片尺寸均为720*405,这里需要注意以下几点:

ul#img列表相对于nav是绝对定位的,#img的长度必须设置为所有图片的总宽度,这样图片才可以并列一排显示;

总容器nav的宽度必须设置为图片的宽度720px,即只能显示一张图片,超出宽度的部分隐藏,即overflow: hidden;

小圆点列表应该在图片列表上面显示,故设置#img的z-index:-1;

小圆点列表是由一系列的li通过改变边框样式构成,故只需改变背景颜色即可达到移动小圆点的效果。

*{
    margin:0;
    padding:0;
  }
  nav{
    width: 720px;
    height: 405px;
    margin:20px auto;
    overflow: hidden;
    position: relative;
  }
  #index{
    position: absolute;
    left:320px;
    bottom: 20px;
  
  }
  #index li{
    width:8px;
    height: 8px;
    border: solid 1px gray;
    border-radius: 100%;
    background-color: #eee;
    display: inline-block;
  }
  #img{
    width: 3600px;/*不给宽高无法移动*/
    height: 405px;
    position: absolute;/*不定义absolute,js无法设置left和top*/
    z-index: -1;
  }
  #img li{
    width: 720px;
    height: 405px;
    float: left;
  }
  #index .on{
    background-color: black;
  }

JS部分

图片移动函数moveElement()

moveElement函数需要获取图片现在的位置以及目标位置并计算它们之间的差距进行移动,可以用offsetLeft和offsetTop获取图片现在的位置。图片移动时“划过”的效果是将距离分成好10次进行移动,即利用setTimeOut函数,然而为了防止鼠标悬停,需调用clearTimeout()函数,代码如下:

function moveElement(ele,x_final,y_final,interval){//ele为元素对象
    var x_pos=ele.offsetLeft;
    var y_pos=ele.offsetTop;
    var dist=0;
    if(ele.movement){//防止悬停
      clearTimeout(ele.movement);
    }
    if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
      return;
    }
    dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
    x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
    
    dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
    y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
    
    ele.style.left=x_pos+'px';
    ele.style.top=y_pos+'px';
    
    ele.movement=setTimeout(function(){//分10次移动,自调用10次
      moveElement(ele,x_final,y_final,interval);
    },interval)
  }

小圆点移动函数moveIndex()

移动小圆点的实质是移动设置的背景颜色的类on,原理是先判断哪个li上有背景颜色,有则去掉,让所有的li都没有背景,然后在对当前的li添加背景。

function moveIndex(list,num){//移动小圆点
    for(var i=0;i<list.length;i++){
      if(list[i].className=='on'){//清除li的背景样式
        list[i].className='';
      }
    }
    list[num].className='on';
  }

图片自动轮播

将以下代码直接写在window.onload中即可。

这里需要定义一个变量index,表示移动到第index(0~n-1,n为li的个数)张图片。

var img=document.getElementById('img');
  var list=document.getElementById('index').getElementsByTagName('li');
  var index=0;//这里定义index是变量,不是属性

  var nextMove=function(){//一直向右移动,最后一个之后返回
    index+=1;
    if(index>=list.length){
      index=0;
    }
    moveIndex(list,index);
    moveElement(img,-720*index,0,20);
  };

图片的自动轮播需要用到setInterval()函数,让程序每隔几秒自动调用nextMove()函数:

var play=function(){
    timer=setInterval(function(){
      nextMove();
    },2500);
  };

鼠标覆盖小圆点效果

要实现鼠标覆盖哪个小圆点,就呈现出对应的图片这一效果,需要知道鼠标覆盖的是哪个小圆点,这里给每个li都添加一个自定的属性index,使该属性的值为对应的小圆点的序号i(0~n-1,n为li的个数),这样每次鼠标覆盖时只需获取index属性的值即可知道鼠标覆盖的是哪个小圆点。注意,该index属性和变量index没有丝毫的关系,只有相同的名字。

for(var i=0;i<list.length;i++){//鼠标覆盖上哪个小圆圈,图片就移动到哪个小圆圈,并停止
    list[i].index=i;//这里是设置index属性,和index变量没有任何联系
    list[i].onmouseover= function () {
      var clickIndex=parseInt(this.index);
      moveElement(img,-720*clickIndex,0,20);
      index=clickIndex;
      moveIndex(list,index);
      clearInterval(timer);
    };
    list[i].onmouseout= function () {//移开后继续轮播
      play();
    };
  }

总结

轮播图的实现并不复杂,主要在于将图片的移动行为和小圆点的移动行为分开,这样就比较容易实现。这个轮播图其实还是有点问题的,从最后一幅图滑向第一个时滑动的距离较长,其实也很好解决,将滑动的方式改一下,这里是根据-720*index来计算最终的left值,而index是将图片的移动和小圆点的移动绑到一起,将滑动方式改成现在的offsetLeft+(-720),图片的移动就可以与index值无关,然后在html文件增加一幅图片:

<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>

然后在滑到最后一幅图片时,迅速的将偏移量赋值0,变成第一幅,两幅图一样,无法分辨其中变化,即可达到无缝连接。

if(x_pos==-3600){
    ele.style.left='0';
    ele.style.top='0';
  }else{
    ele.style.left=x_pos+'px';
    ele.style.top=y_pos+'px';
  }

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

Javascript 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
微信小程序联网请求的轮播图
Jul 07 #Javascript
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
英文版餐饮业求职信
2013/10/18 职场文书
团员的自我评价
2013/12/01 职场文书
出纳员的岗位职责
2014/02/22 职场文书
小学庆六一活动方案
2014/02/28 职场文书
安全宣传标语
2014/06/10 职场文书
文明礼仪标语
2014/06/13 职场文书
食品安全处置方案
2014/06/14 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
授权委托书(完整版)
2014/09/10 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书