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 学习笔记(十六) js事件
Feb 01 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
vue-property-decorator用法详解
Dec 12 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
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
javascript中new关键字详解
2015/12/14 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
axios基本入门用法教程
2017/03/25 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
js实现旋转的星空效果
2019/11/01 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python中运行并行任务技巧
2015/02/26 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
送给程序员的20个Java集合面试问题
2014/08/06 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
就业协议书
2014/09/12 职场文书
假释思想汇报范文
2014/10/11 职场文书
导游词格式
2015/02/13 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
教师节晚会主持词
2015/06/30 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis