<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js实现图片无缝轮播</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<style>

    .b2{

        width: 200px;

        height: 200px;

        margin: 44px auto 0;

        position: relative;

        overflow: hidden;

        background-color: gray;

    }

    .b2 .b2list{

        width: 600px;

        height: 200px;

        position: absolute;

        top: 0;

        left: 0;

    }

    .b2 .item{

        width: 200px;

        height: 200px;

        float: left;

    }

    .b2 .item:nth-child(1) {

        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/7665cfeb1b50e560693509b7a4045861.jpeg");

        background-size: 200px 200px;

    }

    .b2 .item:nth-child(2){

        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/ee34f88f37b317849cc0e80076b89bab.jpeg");

        background-size: 200px 200px;

    }

    .b2 .item:nth-child(3){

        background-image: url("https://ximg.2cq.com/img/system/ad/tieba/1c9b819f1b9ede319e8e1b8ba63066e8.jpeg");

        background-size: 200px 200px;

    }

</style>

<body>

    <div class="b2">

        <div class="b2list" data="0">

            <div class="item">1</div>

            <div class="item">2</div>

            <div class="item">3</div>

        </div>

    </div>

    <script>

        $(function(){

            setInterval("auto_left_me();",3000);

        });

        function auto_left_me(){

            var num = $(".b2 .b2list").attr("data");

            num++;

            if(num>2){

                num=0;

            }

            $(".b2 .b2list").attr("data",num);

            $('.b2 .b2list').animate({'left':-200*num});

        }

    </script>

</body>

</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. Python 3.9.0 首个迭代版本发布了

    Python 3.9.0 alpha 1 发布了,这是 3.8 之后的首个 3.9 系列版本. ! 官方没有介绍新特性,也没有添加新模块,但是以下模块有所改进: ast asyncio curses ...

  2. kanbanflow的使用

    也许在工作中大家都听说过番茄工作法,就是每次在一个番茄钟25分钟内保持高度专注,并且在时间结束的时候会提醒你,然后稍作休息5分钟:此外,在产品迭代开发过程中常常会接受到不同的task:那么,我们是否可 ...

  3. 远程执行命令_python

    一.远程执行命令模块subprocess Python可以使用subprocess下的Popen类中的封装的方法来执行命令 构造方法 popen() 创建popen类的实例化对象 ··· obj = ...

  4. H3C端口隔离

    一.端口隔离简介 为了实现端口间的二层隔离,可以将不同的端口加入不同的VLAN,但VLAN资源有限.采用端口隔离特性,用户只需要将端口加入到隔离组中,就可以实现隔离组内端口之间二层隔离,而不关心这些端 ...

  5. python package install error and little code bugs

    When you install packages using setup.py, the error: (py37) C:\Users\weda\Phd\python packages\visibi ...

  6. DVR

    DVR,全称为Digital Video Recorder(硬盘录像机),即数字视频录像机,相对于传统的模拟视频录像机,采用硬盘录像,故常常被称为硬盘录像机.它是一套进行图像计算存储处理的计算机系统, ...

  7. Python 序列化与反序列化

    序列化是为了将内存中的字典.列表.集合以及各种对象,保存到一个文件中(字节流).而反序列化是将字节流转化回原始的对象的一个过程. json库 序列化:json.dumps() 反序列化:json.lo ...

  8. Mac配置环境变量时终端显示bash-3.2解决方案

    1.问题描述 (base) -bash-3.2$ vi ~/.bash_profile (base) -bash-3.2$ source ~/.bash_profile 2.解决方案 无授权转,侵权删 ...

  9. Redis到底是多线程还是单线程？线程安全吗，还需要加锁吗？

    0. redis单线程问题 单线程指的是网络请求模块使用了一个线程(所以不需考虑并发安全性),即一个线程处理所有网络请求,其他模块仍用了多个线程. 1. 为什么说redis能够快速执行 (1) 绝大部 ...

  10. vscode中LaTeX的编写

    前言 在学习\(\mathrm{\LaTeX}\)的时候尝试过很多编辑器,但都被其复古的外观或者复杂的配置劝退.并且因为本身就在使用VScode写其他的一些语言,正好借此机会也学习一下怎么用VScod ...