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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JS中Map和ForEach的区别
Feb 05 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
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
星际玩家的三大定律
2020/03/04 星际争霸
在JavaScript中调用php程序
2009/03/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Django异步任务线程池实现原理
2019/12/17 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
招商经理岗位职责
2013/11/16 职场文书
品牌推广策划方案
2014/05/28 职场文书
主题团日活动总结
2014/06/25 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
高三化学教学反思
2016/02/22 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
golang 如何用反射reflect操作结构体
2021/04/28 Golang
浅谈python中的多态
2021/06/15 Python