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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JavaScript类库D
Oct 24 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
layui选项卡效果实现代码
May 19 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
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
php修改时间格式的代码
2011/05/29 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
python遍历目录的方法小结
2016/04/28 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
详解python中的hashlib模块的使用
2019/04/22 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
详解Flask前后端分离项目案例
2020/07/24 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
Linux的文件类型
2016/07/05 面试题
优秀村官事迹材料
2014/01/10 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
python 实现体质指数BMI计算
2021/05/26 Python
Python函数中apply、map、applymap的区别
2021/11/27 Python