<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>多图无缝循环翻页效果</title>

     <style>

     * {

         margin: 0;

         padding: 0;

     }

     .carousel {

         width: 1000px;

         height: 500px;

         margin: 0 auto;

         overflow: hidden;

     }

     .carousel ul li {

         width: 1000px;

         height: 500px;

         list-style-type: none;

         float: left;

     }

     .carousel ul li a img {

         width: 100%;

         height: 100%;

         object-fit: contain;

     }

     </style>

 </head>

 <body>

     <div class="carousel">

         <ul>

             <li>

                 <a href="#">

                     <img src="https://api.meowv.com/girl" alt="1">

                 </a>

             </li>

             <li>

                 <a href="#">

                     <img src="https://api.meowv.com/girl" alt="2">

                 </a>

             </li>

             <li>

                 <a href="#">

                     <img src="https://api.meowv.com/girl" alt="3">

                 </a>

             </li>

         </ul>

     </div>

 </body>

 </html>

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

 <script>

 var carousel = $('.carousel ul'),

     li = $('.carousel ul li');

 carousel.css('width', li.width() * li.length);

 setInterval(function() {

     carousel.animate({

         'marginLeft': -li.width()

     }, 500, function() {

         $(this).animate({ 'marginLeft': 0 }, 0)

             .find('li').eq(0).appendTo($(this));

     });

 }, 3000);

 </script>

HTML多图无缝循环翻页效果的更多相关文章

  1. 自己定义 ViewGroup 支持无限循环翻页之三(响应回调事件)

    大家假设喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处,再次感谢 ################################ ...

  2. css实现翻页效果

    如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0 ...

  3. （旧）子数涵数·PS ——翻页效果

    一.首先在网络上下载一张图片,作为素材.这是我下载的素材,至于为什么选择这张照片呢,当然不是因为自己的一些羞羞的念头啦. 二.打开Photoshop,我使用的版本是CS3(因为CS3所占的磁盘空间较小 ...

  4. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

  5. Android 滑动效果高级篇（七）—— 华丽翻页效果

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...

  6. transform3D实现翻页效果

    ---恢复内容开始--- 闲篇 最近升级了下百度音乐,唯一的感觉就是动画效果很炫丽.我不是个对产品很敏感的人,但是这段时间观察一些大厂的产品发现现在的APP越来越重视动画效果了.大家可能没有注意过,连 ...

  7. ViewPager实现滑动翻页效果

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...

  8. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  9. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

随机推荐

  1. javaweb请求编码 url编码 响应编码 乱码问题 post编码 get请求编码 中文乱码问题 GET POST参数乱码问题 url乱码问题 get post请求乱码 字符编码

     乱码是一个经常出现的问题 请求中,参数传递的过程中也是经常出现乱码的问题 本文主要整理了请求乱码中的问题以及解决思路   先要理解一个概念前提: 编码就是把图形变成数值码所以说: 图形的字符  -- ...

  2. Java并发专题（一）认识线程

    1.1 认识线程 线程是轻量级进程,也是程序执行的一个路径,每一个线程都有自己的局部变量表.程序计数器(指向正在执行的指令指针)以及各自的生命周期,现代操作系统中一般不止一个线程在运行.比如说,当我们 ...

  3. OI回忆录？

    序 一直觉得,回忆录这种东西是签了清北约进了集训队的大爷们站在金字塔的顶端带着一丝轻描淡写的忧愁说一句"退役了啊~",对于我这种省选就退役的人好像没什么资格写这种东西.可还是敲起了 ...

  4. Perl IO：随机读写文件

    随机读写 如果一个文件句柄是指向一个实体文件的,那么就可以对它进行随机数据的访问(包括随机读.写),随机访问表示可以读取文件中的任何一部分数据或者向文件中的任何一个位置处写入数据.实现这种随机读写的功 ...

  5. C# 消息队列-MSMQ

    MQ是一种消息中间件技术,所以它能够支持多种类型的语言开发,同时也是跨平台的通信机制,也就是说MQ支持将信息转化为XML或者JSon等类型的数据存储到消息队列中,然后可以使用不同的语言来处理消息队列中 ...

  6. 关于Android使用SFTP上传文件报错问题

    错误报告java.lang.NoClassDefFoundError:Failed resolution of: Lorg/ietf/jgss/Oid; 问题是由于 Lorg.ietf. jgss.O ...

  7. javascript进阶之AJAX

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  8. Flexbox弹性布局

    Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.最新版本兼容IE11+.firefox.safari.chrome.opera及移动端,但移动端ios7.1 ...

  9. Redis过期策略

    一.设置过期时间 expire key time(以秒为单位) -- 这是最常用的方式 setex(String key, int seconds, String value) -- 字符串独有的方式 ...

  10. 瓦片切图工具gdal2tiles.py改写为纯c++版本(二)

    python这么火,C++/C#的程序员都生存不下去了,为啥还要干把python转写成c++的这种反动的事? 项目需要呗... gdal2tiles.py文件中有两个类是计算全球墨卡托与WGS84两种 ...