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 相关文章推荐
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JavaScript File分段上传
Mar 10 Javascript
如何提高数据访问速度
Dec 26 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
基于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利用curl抓取新浪微博内容示例
2014/04/27 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python机器学习之贝叶斯分类
2018/03/26 Python
python3 enum模块的应用实例详解
2019/08/12 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Java基础面试题
2014/07/19 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
爱的承诺书
2015/01/20 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
农业项目合作意向书
2015/05/08 职场文书
在职证明格式样本
2015/06/15 职场文书
开学第一周总结
2015/07/16 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers