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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
js实现日历与定时器
2017/02/22 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python实现字符串格式化的方法小结
2017/02/20 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python and or用法详解
2019/06/26 Python
Python简易版图书管理系统
2019/08/12 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
python如何实现递归转非递归
2021/02/25 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
公积金单位接收函
2014/01/11 职场文书
教师工作表现评语
2014/12/31 职场文书
撤诉申请怎么写
2015/05/19 职场文书
转变工作作风心得体会
2016/01/23 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
如何利用pygame实现打飞机小游戏
2021/05/30 Python
python中__slots__节约内存的具体做法
2021/07/04 Python