<!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. 使用kubeadm部署Kubernetes集群

    一.环境架构与部署准备 1.集群节点架构与各节点所需安装的服务如下图: 2.安装环境与软件版本: Master: 所需软件:docker-ce 17.03.kubelet1.11.1.kubeadm1 ...

  2. 解决ajaxfileupload上传文件在IE浏览器返回data为空问题

    关于ajaxfileupload,建议还是别用,已经没有人维护的脚本了,笔者就是入了这个坑. 在IE浏览器中ajaxfileupload返回data为空 jq.ajaxFileUpload ( { u ...

  3. 分享一些 Windows 平台上的神器

    下面分享一些 Windows 平台上日常开发使用的软件,有些软件我自认为是神器,可以大大提高效率. 编辑器类软件 IntelliJ IDEA IntelliJ IDEA 内部集成 Java 开发环境, ...

  4. Linux设备驱动之IIO子系统——Triggered buffer support触发缓冲支持

    Triggered buffer support触发缓冲支持 在许多数据分析应用中,能够基于某些外部信号(触发器)捕获数据是比较有用的. 这些触发器可能是: 数据就绪信号 连接到某个外部系统的IRQ线 ...

  5. 【AO笔记】有关TIN数据集的常用介绍

    写论文查了很多TIN的接口和属性,特此来记录一下. 转载请注明出处:博客园@秋意正寒,B站同名. 未完待续 1. Tin数据集在ArcGIS中的描述 Tin数据集在磁盘中,被ArcGIS以文件夹形式管 ...

  6. USGS-EROS项目espa-surface-reflectance中的Landsat8 大气校正LaSRC Version 1.3.0模块利用vs2010编译出windows64位版本（四）

    ,支持一些关键问题: 1    数据初始化问题.该问题是指在linux环境下编程标准c并编译,用户定义的变量默认初始值是0,但在windows 64 win7环境中,变量默认初始值是负值极小.... ...

  7. android view 转Bitmap 生成截图

    文章链接:https://mp.weixin.qq.com/s/FQmYfT-KYiDbp-0HzK_Hpw 项目中经常会用到分享的功能,有分享链接也有分享图片,其中分享图片有的需要移动端对屏幕内容进 ...

  8. 小程序实践（十）：textarea实现简单的编辑文本界面

    textarea是官方的原生组件,用于多行输入 简单的例子,监听文本内容.长度,以及设置最大可输入文本长度 wxml <view class='textarea-Style'> <t ...

  9. 微信小程序（六） 文章详情静态页面detail

    文章详情静态页面detail:

  10. 微信小程序支付证书及SSL证书使用

    小程序使用微信支付包括:电脑管理控制台导入证书->修改代码为搜索证书->授权IIS使用证书->设置TSL加密级别为1.2 描述: 1.通常调用微信生成订单接口的时候,使用的证书都是直 ...