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中void(0)的具体含义解释
Aug 02 Javascript
javascrip关于继承的小例子
May 10 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue中用 async/await 来处理异步操作
Jul 18 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 SQLite类
2009/05/07 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php微信开发之百度天气预报
2016/11/18 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
Web开发之JavaScript
2012/03/29 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python2.7的编码问题与解决方法
2016/10/04 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
高中军训感言1000字
2014/03/01 职场文书
文案策划求职信
2014/03/18 职场文书
中班开学寄语
2014/04/04 职场文书
信息工作经验交流材料
2014/05/28 职场文书
室内设计专业自荐信
2014/05/31 职场文书
学校督导评估方案
2014/06/10 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS