php如何从左往右轮播,js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法。
原理
相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片。
html部分
nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类;第二个ul列表#img为图片列表。
Carousel Figure
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
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos
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
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[i].index=i;//这里是设置index属性,和index变量没有任何联系
list[i].οnmοuseοver= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].οnmοuseοut= function () {//移开后继续轮播
play();
};
}
总结
轮播图的实现并不复杂,主要在于将图片的移动行为和小圆点的移动行为分开,这样就比较容易实现。这个轮播图其实还是有点问题的,从最后一幅图滑向第一个时滑动的距离较长,其实也很好解决,将滑动的方式改一下,这里是根据-720*index来计算最终的left值,而index是将图片的移动和小圆点的移动绑到一起,将滑动方式改成现在的offsetLeft+(-720),图片的移动就可以与index值无关,然后在html文件增加一幅图片:
然后在滑到最后一幅图片时,迅速的将偏移量赋值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';
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php如何从左往右轮播,js实现从左向右滑动式轮播图效果相关推荐
- 左值右值将亡值泛左值
左右值概念 简单理解 左值:赋值运算符左边的变量,可以接受右边值,例如 int a = 10; a就是一个左值右值:赋值运算符右边的值,这个值可以是一个变量也可以是一个常量,例如 int a = 10 ...
- html怎么从左到右设置颜色,使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS)...
使用CSS从左到右填充文本颜色(Text colour fill from left to right using CSS) 我试图动画有".popUpWord"类的文本. 在悬停 ...
- 响应式轮播_角度2的响应式轮播组件
响应式轮播 Update (March 22, 2016): Provided a Demo Link which is available on PlunkerUpdate (March 21, 2 ...
- html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
- 【程序设计】浅析编程语言的区间为何常是左闭右开
高中大家都学过区间--闭区间.开区间.左闭右开区间.左开右闭区间. 区间在Java里也有体现.比如用解析字符串子串的形式来提取身份证的信息,提取子串就相当于截取一个区间. 用一门语言,用的久应该会对它 ...
- Python之从左到右依次输出数字上每位的数
文章目录 写在开头的话 从左到右依次输出每位上的数 题目 分析 方法一(将用户输入转化为整数) 方法二(将用户输入作为字符串处理) 写在最后的话: 这里是一段防爬虫文本,请读者忽略. 本文原创首发于C ...
- css3 div从左到右滑入
css3 div从左到右滑入 实现div从左到右滑入,代码如下: // lToR定义一个动画 @keyframes lToR{from {width: 0px;}}@-moz-keyframes lT ...
- 用JavaScript实现网页无限轮播图效果,附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
- javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图 实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局 简易版轮播图 < > 页面样式 .container{width: 60 ...
最新文章
- python爬虫学习(三):使用re库爬取淘宝商品,并把结果写进txt文件
- Mybatis通过colliection属性递归获取菜单树
- Windows下安装部署DBeaver连接clickhouse
- mysql之主从复制 简书_MySQL主从复制(传统)
- pythonqt4上位机开发_上位机开发之单片机通信实践(一)
- java 多线程 临界区_【Java并发性和多线程】竞态条件与临界区
- Spring Boot 项目总是创建失败,这几个备选方案一定要收藏
- (转)2006年100款最佳安全工具谱
- Python3.6 用Django连接MySQL
- React 集成 jsoneditor 以对json数据进行展示和修改
- 创建第一个Android app项目
- Java随机生成名字大全 手机号
- 2021年全球与中国汽车TSR(交通标志识别)系统行业市场规模及发展前景分析
- sqliteman安装时出现The following packages have unmet dependencies: libqtgui4 : Depends: libpng12-0错误
- 多模块渗透测试框架PTF
- #使用SAS进行变量筛选、模型诊断、多元线性回归分析 #
- 2018年sfdc工作总结_常见Salesforce 异常
- 2017年大数据从业者又要涨工资了!
- iPhone12、iPhone12 Pro、iPhone12 Max、iPhone12 Pro Max 详细参数配置
- 深度盘点:初学者必备这 15 个 Scikit-Learn 重要技能
热门文章
- java的xms与xmx和服务器内存_JAVA_OPTS参数-Xms和-Xmx的作用
- mysql 5.6 双向互备_mysql双主互备
- Pytorch使用过程错误与解决 -汇总~
- python super 理解(四)
- opencv 入门 demo
- pytorch 笔记:DataLoader 扩展:构造图片DataLoader
- Pytorch 笔记——tensor
- MATLAB实现牛顿插值的源程序
- python前缀表达式求值_python数据结构与算法 11 后缀表达式求值
- model.train_on_batch介绍【TensorFlow2入门手册】