js实现无缝轮播图


Posted in Javascript onMarch 09, 2020

本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下

CSS样式:

<style type="text/css">
 #box{width: 1000px;height: 375px;border: 3px solid black;
 margin: 30px auto;position: relative;overflow: hidden;}
 #box .img{position: absolute;left: 0;top: 0;}
 #box .img img{width: 1000px;height: 375px;float: left;}
 #box .btn input{border-radius: 50%;border: 0;width: 40px;
 height: 40px;font-size: 25px;z-index: 5;top: 165px;position: absolute;}
 #left{left: 0;}
 #right{right: 0;}
</style>

HTML结构:

<div id="box">
 <div class="img">
 <img src="img/1.jpg" >
 <img src="img/2.jpg" >
 <img src="img/3.jpg" >
 <img src="img/4.jpg" >
 <img src="img/1.jpg" > //利用第一张图,达到无缝轮播的视觉效果
 </div>
 <div class="btn">
 <input type="button" id="left" value="<" />
 <input type="button" id="right" value=">" />
 </div>
</div>

JavaScript:

<script>
 class LunBO{
 constructor() {
  this.img = document.querySelector(".img");
 this.child = this.img.children;
 this.left = document.getElementById("left");
 this.right = document.getElementById("right");
 this.index = 0;
 }
 init(){
 this.img.style.width = this.child.length * this.child[0].offsetWidth + "px"; //有多少图片设置多少宽度
 }
 addEvent(){
 var that = this;
 this.left.onclick = function(){
 that.changeIndex(1); //点击左按钮,设置索引
 }
 this.right.onclick = function(){
 that.changeIndex(2); //点击右按钮,设置索引
 }
 }
 changeIndex(i){
 if(i==1){
 if(this.index == 0){
  this.index = this.child.length - 2;
  this.img.style.left = -(this.child.length-1) * this.child[0].offsetWidth + "px";
 }else{
  this.index--;
 }
 }else{
 if(this.index == this.child.length-1){
  this.index = 1;
  this.img.style.left = 0;
 }else{
  this.index++;
 }
 }
 this.setSplace();
 }
 setSplace(){
 move(this.img,"left",-this.index * this.child[0].offsetWidth); //调用动画
 }
 }
 var lb = new LunBO();
 lb.init();
 lb.addEvent();
</script>

设置动画:

function move(ele,attr,target){
 clearInterval(ele.t);
 ele.t=setInterval(()=>{
 let iNow;
 if(attr=="opacity"){
 iNow=getStyle(ele,attr)*100;
 }else{
 iNow=parseInt(getStyle(ele,attr));
 }
 let speed=(target-iNow)/8;
 speed=speed<0?Math.floor(speed):Math.ceil(speed);
 if(iNow==target){
 clearInterval(ele.t);
 }else{
 if(attr=="opacity"){
 ele.style.opacity=(iNow+speed)/100;
 }else{
 ele.style[attr]=iNow+speed+"px";
 }
 }
 },30)
}
function getStyle(ele,attr){
 if(ele.currentStyle){
 return ele.currentStyle[attr];
 }else{
 return getComputedStyle(ele,false)[attr];
 }
}

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JS实现重新加载当前页面
Nov 29 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 #Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 #Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
You might like
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
详解Python中with语句的用法
2015/04/15 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
聊聊Python中的pypy
2018/01/12 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python递归实现快速排序
2018/08/18 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
详解Python字典的操作
2019/03/04 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
销售人员中英文自荐信
2013/09/22 职场文书
节约能源标语
2014/06/17 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
交通事故委托书范本
2014/09/28 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
清明节寄语2015
2015/03/23 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
解决Oracle数据库用户密码过期
2022/05/11 Oracle