js实现从右往左匀速显示图片(无缝轮播)


Posted in Javascript onJune 29, 2020

本文实例为大家分享了js实现从右往左匀速显示图片的具体代码,供大家参考,具体内容如下

前言:

匀速显示图片,一般用于重复显示公司活动系列图片

背景图片:

js实现从右往左匀速显示图片(无缝轮播)

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
  .sider{
  height: 300px;
  background: url(zbg.png)no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  }
  .box{
  position: absolute;
  top: 48px;
  left: 0;
  height: 300px;
  width: 10000px;
  }
  .uls,.uls2{
  display: inline-block;
  }
  .uls li,.uls2 li{
  display: inline-block;
  width: 320px;
  height: 206px;
  margin-right: 10px;
  background: red;
  }
  .uls li img,.uls2 li img{
  width: 100%;
  height: 100%;
  }
 </style>
</head>
<body>
 <div class="sider">
 <div class="box">
 <ul class="uls">
 <li>这是图片1</li><li>
 这是图片2</li><li>
 这是图片3</li><li>
 这是图片4</li><li>
 这是图片5</li><li>
 这是图片6</li>
 </ul><ul class="uls2"><ul>
 </div>
 </div>
 <script src="jquery.min.js"></script>
 <script>
  $(function(){
  var i=0;
  var sizess = $(".uls li").length;
  var sizesspx = sizess*330;
  var clone = $(".uls").html();
  $(".uls2").html(clone);
  var t=setInterval(moveL,30);
  
// 封装的动画函数
  function moveL(){
  i++;
  var sizess = $(".uls li").length;
  if(i>sizesspx){
  $(".box").css({left:0});
  i=0
  }
  $(".box").css({left:-i+'px'});
  }
  })
 </script>
</body>
</html>

运行效果:

js实现从右往左匀速显示图片(无缝轮播)

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家学习Jquery程序设计有所帮助。

Javascript 相关文章推荐
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
Vue实现可移动水平时间轴
Jun 29 #Javascript
uniapp与webview之间的相互传值的实现
Jun 29 #Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 #Javascript
iview实现图片上传功能
Jun 29 #Javascript
vue+animation实现翻页动画
Jun 29 #Javascript
vue+element实现图片上传及裁剪功能
Jun 29 #Javascript
vue实现匀速轮播效果
Jun 29 #Javascript
You might like
smarty section简介与用法分析
2008/10/03 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
vue观察模式浅析
2018/09/25 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
python距离测量的方法
2018/03/06 Python
python实现简单图片物体标注工具
2019/03/18 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
校园十佳歌手策划书
2014/01/22 职场文书
企业宣传语大全
2015/07/13 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL