1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js实现图片无缝轮播</title>
  6.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  7. </head>
  8. <style>
  9.     .b2{
  10.         width: 200px;
  11.         height: 200px;
  12.         margin: 44px auto 0;
  13.         position: relative;
  14.         overflow: hidden;
  15.         background-color: gray;
  16.     }
  17.     .b2 .b2list{
  18.         width: 600px;
  19.         height: 200px;
  20.         position: absolute;
  21.         top: 0;
  22.         left: 0;
  23.     }
  24.     .b2 .item{
  25.         width: 200px;
  26.         height: 200px;
  27.         float: left;
  28.     }
  29.     .b2 .item:nth-child(1) {
  30.         background-image: url("https://ximg.2cq.com/img/system/ad/tieba/7665cfeb1b50e560693509b7a4045861.jpeg");
  31.         background-size: 200px 200px;
  32.     }
  33.     .b2 .item:nth-child(2){
  34.         background-image: url("https://ximg.2cq.com/img/system/ad/tieba/ee34f88f37b317849cc0e80076b89bab.jpeg");
  35.         background-size: 200px 200px;
  36.     }
  37.     .b2 .item:nth-child(3){
  38.         background-image: url("https://ximg.2cq.com/img/system/ad/tieba/1c9b819f1b9ede319e8e1b8ba63066e8.jpeg");
  39.         background-size: 200px 200px;
  40.     }
  41. </style>
  42. <body>
  43.     <div class="b2">
  44.         <div class="b2list" data="0">
  45.             <div class="item">1</div>
  46.             <div class="item">2</div>
  47.             <div class="item">3</div>
  48.         </div>
  49.     </div>
  50.     <script>
  51.         $(function(){
  52.             setInterval("auto_left_me();",3000);
  53.         });
  54.         function auto_left_me(){
  55.             var num = $(".b2 .b2list").attr("data");
  56.             num++;
  57.  
  58.             if(num>2){
  59.                 num=0;
  60.             }
  61.             $(".b2 .b2list").attr("data",num);
  62.             $('.b2 .b2list').animate({'left':-200*num});
  63.         }
  64.  
  65.     </script>
  66. </body>
  67. </html>

js实现图片无缝轮播的更多相关文章

  1. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  2. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  3. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  5. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  6. js插件-图片椭圆轮播效果

    插件效果图: html 代码如下: <div id="container"> <img src="images/cartoon/1.jpg" ...

  7. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  8. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  9. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

随机推荐

  1. XSS漏洞的poc与exp

    poc <script>alert('xss')</script>  最简单常用的poc <a href='' onclick=alert('xss')>type& ...

  2. redis安装并设置开机启动

    1.下载并上传redis安装包至linux服务器目录:/usr/local/redis. 2.解压:tar -zxvf redis-5.0.7.tar.gz 3.编译安装:make && ...

  3. centos7搭建zabbix

    参考:https://blog.csdn.net/xiaocong66666/article/details/82818893 安装所需的依赖包即可: yum install gcc gcc-c++ ...

  4. 获取mybaties插入记录自动增长的主键值

    首先在Mybatis Mapper文件中insert语句中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是保存主键值的属性. 例如: <in ...

  5. php 对接国外支付 ipay88支付

    ipay88支付 近期接了一个国外的项目,客户指定要这种支付,就搞搞呗,其实流程和思路都是差不多的,往下看 他的流程其实非常简单  下面的流程仔细看看,看懂了就会了 1 首先我们需要先获取下单所需要的 ...

  6. CF-478C Table Decorations (贪心)

    Table Decorations Time limit per test: 1 second Memory limit per test: 256 megabytes Problem Descrip ...

  7. docker镜像相关的常用操作

    1.保存镜像 #docker save 镜像名称 -o 保存的完整地址和文件名 docker save zhoushiya/zhiboyuan -o d:/zhiboyuan.tar 2.载入镜像 # ...

  8. python中使用anaconda对不平衡数据的处理包imblearn的安装

    为了建模,处理不平衡数据,想使用SMOTEENN方法进行数据平衡处理,为此需要下载对应的包imblearn   最开始直接从anaconda中进行: conda install  imblearn 报 ...

  9. selenium 百度登录

    private String baseUrl="http://www.baidu.com/"; --------- @Test public void testLoginB() t ...

  10. macaron 根目录默认为templates文件夹，所以如果启动目录同目录下有templates目录，要给它指定另一个文件夹

    m *macaron.Macaron //随便指向一个目录,因为web没用到模板,不能使用默认值templates,因为这个目录被其他模板占用了m.Use(macaron.Renderer(macar ...