<!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. Python3+Selenium2完整的自动化测试实现之旅(六):Python单元测试模块Unittest运用

    一.Unittest单元测试框架简介 Unitest是Python下的一个单元测试模块,是Python标准库模块之一,安装完Python后就可以直接import该模块,能在单元测试下编写具体的测试用例 ...

  2. Perl处理和收走子进程(退出状态码和wait)

    本文关于处理子进程退出状态码的内容主体来自于<Pro Perl>的第21章. 子进程退出状态码 每个子进程在退出时,操作系统都会保留它们的退出状态码,并在内核维护的进程表中保留子进程项.对 ...

  3. 【Zabbix】zabbix设置邮件报警

    目录 Zabbix设置邮件报警 1.安装sendmail或postfix 2.安装邮件发送工具mailx . 3.配置mail 4. 测试邮件发送 5.编写邮件发送脚本sendmail.sh 6.设置 ...

  4. windows安装elasticsearch

    1. 去官网 https://www.elastic.co/cn/ 下载 注意: ES对JDK版本有较高的要求,5.x及以上版本需要JDK8支持,本人此次使用2.4.6版本2. 下载后,JDK先安装, ...

  5. 【.Net Core】处理静态文件

    静态文件存储在项目的 Web 根目录中. 默认目录是 <content_root>/wwwroot,但可通过 UseWebRoot 方法更改目录. public class Program ...

  6. 驰骋工作流引擎JFlow与activiti的对比之4种包含多实例的模式

    1. 无同步的多实例(MIwithout) 在流程中,一个活动可以激活多个实例,每个实例相互独立,并不需要在后面进行同步. 例子:比如用户购买了N本书,于是后续的支付账单.更新客户可以以本书为单位各自 ...

  7. 测者的测试技术手册:自动的自动化框架EvoSuite集成Cobertura得到可视化的代码覆盖报告

    EvoSuite是由Sheffield等大学联合开发的一种开源工具,用于自动生成测试用例集,生成的测试用例均符合Junit的标准,可直接在Junit中运行.得到了Google和Yourkit的支持. ...

  8. eclipse开发创建web项目

    1.打开eclipse,界面如下: 2.首先配置tomcat,操作:Windows--->perferences 如下: 3.操作:server--->Runtime Environmen ...

  9. Linux(DeepInOS) 下 mysql 的安装与基本配置

    索引: 目录索引 参看代码 GitHub: DeepIn(GNU/Linux) MySQL 一.安装 sudo apt-get install mysql-server 期间需要输入两次密码,root ...

  10. ICD

    International Classification of Diseases,ICD 国际疾病分类