原生js写简单轮播图方式1-从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法。
原理
相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片。
点击查看效果
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"></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';}
转载于:https://www.cnblogs.com/aicanxxx/p/6926282.html
原生js写简单轮播图方式1-从左向右滑动相关推荐
- html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下 一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
- 原生js进阶版轮播图实现(走马灯效果,无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
- php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
- 原生js+css 实现轮播图 完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
- 单机按钮来图片轮播_原生js如何实现轮播图效果?
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
- html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
- js判断定时器是否启动_原生js如何做出轮播图的效果
<div class="box"><ul><li class="active"><img src="./im ...
- 原生JS实现小米轮播图和网易云轮播图
文章目录 小米轮播图 网易云轮播图 小米轮播图 实现功能: 定时切换(2s) 点击按钮停止切换 点击向左向右按钮进行相应切换 鼠标点击下方的小圆点,并进行相应的切换 效果: 代码如下: <!DO ...
- 用js写的轮播图,八位女明星,你翻谁的牌,程序员就是可以为所欲为!
今天下午利用摸鱼的时间做了一个图片轮播,嘿嘿,先看看效果,本来想搞动态图的,整出来效果不好,图片又超过了5M不让传,还是截图吧 感觉需 实现的功能: 1.定时向右滚动. 2.点击明星切换到最中间. 3 ...
- 用原生JavaScript实现简单轮播图
html代码 <div id="banner"><ul><li><img src="images/1.jpg"> ...
最新文章
- oracle 使用nfs挂载的目录不能进行归档
- 关于Python的人工智能这么火,一大波交叉学科和技术应用正在靠近
- 2014.03.20入职第四天
- python2.7出现IOError: [Errno 5] Input/output error
- python基础(14)之 类和对象
- 华为Mate X2黄牛价已超两万,结果小伙子没拿稳,成全网首摔?
- 三只松鼠回应产品含有丙烯酰胺一事:产品符合国家食品安全标准
- JavaScript 获取当前时间戳的三种方式
- 在 React Native 中使用 Hooks
- 开发管理---项目的范围、时间与成本
- html怎么去除照片背景颜色,photoshop怎么去除图片背景色
- Oracle 快速入门 同义词序列视图索引
- 车型识别API调用与批量分类车辆图片
- Linux下非交互式sshpass登录
- 王阳明: <一> 破山中之贼易,破心中之贼难
- Nginx 配置上传文件大小限制
- 3个方法提取PDF文件里的图片
- 语义网笔记(一) 初识语义网
- SPSS计算Cronbach系数的公式及计算代码
- 口语100的flash驱动
热门文章
- Html 垂直滚动条 定位到 指定位置
- 2021年四川省卫生副高考试成绩查询时间,2021年四川卫生资格成绩查询时间及查分入口【6月4日起】...
- centos 6.5 编译php mysql5.6_CentOS6.5 编译安装PHP5.6(apache模块)
- 回溯策略的汉诺塔问题
- 【mysql】扩展-常用函数
- calendar与date区别及常用方法介绍
- 三、运算符、表达式和语句
- docker 中 NGINX+PHP+MYSQL+REDIS+Elasticsearch 环境搭建 (windows系统)
- Ubuntu下备份系统的方法
- jacoco+maven 初次使用覆盖率工具