js实现图片无缝循环轮播


Posted in Javascript onOctober 28, 2019

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

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #container{
  overflow:hidden;
  width:400px;
  height:300px;
  margin:auto;
 }
 #front,#container{
  display:flex; 
  flex-direction:row;
 }
 #container img{
  width:400px;
  height:300px;
 }
 </style>
</head>
<body>
 <div id="container">
 <div id="front">
  <img src="k2.jpg" alt="">
  <img src="k1.jpg" alt="" >
  <img src="k3.jpg" alt="">
  <img src="k4.jpg" alt="">
 </div>
 <div id="back"><img src="k5.jpg" alt=""></div>
 </div>
</body>

<script>
 front.style="position:relative;left:0px;";
 back.style="position:relative;left:0px;";
 setInterval(moveimg,100);
 var fleft,bleft;
 function moveimg(){
 fleft = parseInt(front.style.left);
 bleft = parseInt(back.style.left);
 if(fleft == -1600){
  front.style.left = 400+"px";
  fleft = parseInt(front.style.left);
 }
 if(bleft == -2000) {
  back.style.left = 0+"px";
  bleft = parseInt(back.style.left);
 }
 front.style.left = (fleft-10)+"px";
 back.style.left = (bleft-10)+"px";
 }
</script>
</html>

更多关于轮播图效果的专题,请点击下方链接查看学习

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

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
js简单倒计时实现代码
Apr 30 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Vue 实现html中根据类型显示内容
Oct 28 #Javascript
vue中动态select的使用方法示例
Oct 28 #Javascript
js实现坦克移动小游戏
Oct 28 #Javascript
vue 实现走马灯效果
Oct 28 #Javascript
JS实现json数组排序操作实例分析
Oct 28 #Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 #Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python中元组,列表,字典的区别
2017/05/21 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
三星法国官方网站:Samsung法国
2019/10/31 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
总经理岗位职责范本
2014/02/02 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
《忆江南》教学反思
2014/04/07 职场文书
信仰心得体会
2014/09/05 职场文书
晚会闭幕词
2015/01/28 职场文书
居安思危观后感
2015/06/11 职场文书
小学数学国培研修日志
2015/11/13 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript