<!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. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU启动那些事（8）- 从Raw NAND启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Raw NAND启动. 前面铺垫了七篇启动系列文章,终于该讲具体Boot Device了,我们知道i. ...

  2. 痞子衡嵌入式：ARM Cortex-M文件那些事（0）- 文件关联

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的文件关联. 本篇是文件系列第一篇,本系列文章会逐一介绍ARM Cortex-M开发过程中(以IAR集成开发环境为例,其他开发 ...

  3. 讲一下Asp.net core MVC2.1 里面的 ApiControllerAttribute

    先贴文章链接 正文 ASP.NET Core MVC 2.1 特意为构建 HTTP API 提供了一些小特性,今天主角就是 ApiControllerAttribute. (注:文章是18年2月份的, ...

  4. Jenkins结合.net平台综合之完整示例项目

    前面每一个部分我们都是介绍的单个功能,这里介绍一个完整项目,本文中所用到的命令都放在了github示例代码仓库中 https://github.com/mrtylerzhou/netdevops 命令 ...

  5. 如何正确使用Java泛型

    前言 Java 1.5之前是没有泛型的,以前从集合中读取每个对象都必须先进行转换,如果不小心存入集合中对象类型是错的,运行过程中转换处理会报错.有了泛型之后编译器会自动帮助转换,使程序更加安全,但是要 ...

  6. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

  7. 开源项目商业分析实例(1) - MonicaHQ

    本来写一篇开源商业模式的稿子,因为有四大主题,这个稿子有点大,导致现在半个月过去了,都还没有憋出来.   今天想想还是采用MVP(minimum viable product,最小化可行产品)模式吧. ...

  8. 常用matlab函数（不定时更新）

    直方图类: histc  直方图分组  示例 histc(a,0:1:10)  意义:将a(矩阵或向量)分组,分组设置为 0-1 1-2 2-3 -.. 9-10,(10-11) 百分位 prctil ...

  9. Spark SQL，如何将 DataFrame 转为 json 格式

    今天主要介绍一下如何将 Spark dataframe 的数据转成 json 数据.用到的是 scala 提供的 json 处理的 api. 用过 Spark SQL 应该知道,Spark dataf ...

  10. SQL Server 迁移至MySQL 关键步骤的梳理总结

    迁移主要是通过Navicat工具来实现的.迁移工具的选定在此不讨论. 迁移前准备 1.提前通知DBA\SA\BI等,并确认发布计划及数据库迁移方案. 2.梳理出SQL  Server DB 中影响业务 ...