使用动画制作无缝滚动（轮播）

最新推荐文章于 2023-04-24 22:22:34 发布
最新推荐文章于 2023-04-24 22:22:34 发布
阅读量852 收藏 3
点赞数
分类专栏： H5C3 文章标签： 轮播 无缝滚动 动画 keyframes animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20497071/article/details/97623259
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style type="text/css">
		*{
		    padding: 0;
		    margin: 0;
		}
		div{
		    width: 882px;
		    height: 86px;
		    margin:100px auto;
		    background-color: #ddd;
		    overflow: hidden;
		}
		div >ul{
		    width: 200%;
		    list-style: none;
		    /*1.设置的名称*/
		    animation-name: move;
		    /*2.设置动画的耗时*/
		    animation-duration: 7s;
		    /*3.设置无限循环*/
		    animation-iteration-count: infinite;
		    /*4.设置时间函数*/
		    animation-timing-function: linear;
		}
		div:hover>ul{
			cursor: pointer;
			animation-play-state: paused;
		}
		div > ul > li{
		    width:126px;
		    float: left;
		}
		div > ul > li　> img{
		    width:100%;
		}
		@keyframes move{
			from{
				transform: translateX(0);
			}
			to{
				transform: translateX(-882px);
			}
		}
	</style>
<body>
	<div>
	    <ul>
	        <li><img src="../images/1.jpg" alt=""></li>
	        <li><img src="../images/2.jpg" alt=""></li>
	        <li><img src="../images/3.jpg" alt=""></li>
	        <li><img src="../images/4.jpg" alt=""></li>
	        <li><img src="../images/5.jpg" alt=""></li>
	        <li><img src="../images/6.jpg" alt=""></li>
	        <li><img src="../images/7.jpg" alt=""></li>
	        <li><img src="../images/1.jpg" alt=""></li>
	        <li><img src="../images/2.jpg" alt=""></li>
	        <li><img src="../images/3.jpg" alt=""></li>
	        <li><img src="../images/4.jpg" alt=""></li>
	        <li><img src="../images/5.jpg" alt=""></li>
	        <li><img src="../images/6.jpg" alt=""></li>
	        <li><img src="../images/7.jpg" alt=""></li>
	    </ul>
	</div>
	
</body>
</html>

 

我的哥哥呦
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ul li ,div图片滚动，自动切换，手动控制切换，效果和图片都一级棒！
08-09
li ，div 自动切换，可用按钮切换，图片滚动，效果真的一级棒，是目前我找到的最棒的一个，需要的亲赶紧下手。 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
原生JS实现无缝滚动轮播图
03-11
本教程将深入探讨如何使用原生JavaScript（JS）实现一个无缝滚动轮播图，无需依赖任何外部库，如jQuery或其他轮播插件。 首先，我们需要创建HTML结构。一个简单的轮播图通常包含一个容器div，以及若干个用于展示...
动画实现无缝滚动
weixin_34390996的博客
01-06 270
<style> *{ padding: 0; margin: 0; } div{ width: 882px; height: 86px; margin:100px auto; background-color: #...
无缝轮播滚动图
litternannan的博客
03-26 1074
无缝轮播滚动图 效果图 实现效果 ①无图片点击时，自动轮播设定定时器； ②点击圆点点会轮播并染色，点击左右键可轮播； 实现思路 ①使图片整行排列，给一个窗口，溢出部分隐藏； ②因为要多次调用移动函数，经过尝试后选择参考封装一个animation.js函数，使其实现左右移动，透明度改变的效果； ③设定定时器进行轮播，注意的是设定的时间要大于一页滚动的时间； ④由于至今无法解决的问题，即快速多次点击...
CSS3动画实现无缝滚动
simple5960的博客
09-13 773
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad
利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动
杨明金的博客
11-16 1万+
查看本章节 查看作业目录 需求说明： 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动 实现思路： 在新建 HTML 页面中，添加 <h3> 和无序列表，用无序列表显示 6 本畅销书籍的名称 添加 CSS 规则，重点设置无序列表的父版块 div(id="book") 的宽度和高度，使其只能显示前 3 个列表项，溢出的后 3 项使用 overflow: hidden 属性
无缝滚动轮播图.zip
05-30
本资源为《最全面的无缝滚动轮播图》配套资源，本资源提供了博文中的所有的源码。从轮播图的HTML出发到JavaScript的逐步实现，让你一步步深入走入动画的魅力，感知动画的强大，同时对动画产生浓郁的兴趣。逐步帮你...
js实现无缝滚动轮播图
11-27
总结起来，使用JavaScript和jQuery实现无缝滚动轮播图，主要涉及HTML布局、CSS隐藏/显示控制以及JavaScript事件监听和动画效果。通过这种方式，我们可以创建出用户友好且具有吸引力的轮播图组件，为网站增加动态和...
原生JS实现无缝滚动轮播图（附加无注释版+详解版）
03-12
总之，原生JavaScript实现无缝滚动轮播图是一项涉及DOM操作、事件处理、动画制作等多方面技能的任务。通过实践这个项目，你可以加深对JavaScript的理解，提高网页交互设计的能力。在完成这个轮播图后，你还可以根据...
如何使用JavaScript实现无缝滚动自动播放轮播图效果
10-14
以上代码实现了基本的无缝滚动轮播图功能，包括手动点击序号和箭头切换，以及自动播放。当然，实际应用中可能还需要添加更多细节，例如添加触摸滑动支持、动态加载图片、响应式布局等。但这个基础框架已经足够帮助...
使用Dom元素的animate实现无限滚动列表
Ronychen的博客
04-15 740
使用animate实现滚动列表
CSS3中的animation属性实现无限循环的无缝滚动
热门推荐
JackieDYH的博客
04-23 1万+
在页面中循环展示信息的功能之前一般是用js来实现的，那么用CSS3该如何实现实现呢 有时候在页面的某个模块中，需要无限循环的滚动一些消息。那么如果我们用js实现无缝衔接滚动的思路是什么呢（比如我们这个模块是向上滚动的）？ 克隆A一份完全一样的数据B放在原数据A的后面； 使用setInterval向上滚动A的父级容器； 当向上滚动的距离L正好的A的高度时(L==A.height())，L=0，重新开始滚动，无限循环。 克隆一份数据放在后面，是为了当A向上移动时，后面有数据能填补
继上篇无限滚动列表案例（使用css animation 兼容IE11）
最新发布
Ronychen的博客
04-24 349
2、还有一个点就是animation属性我我们通过js动态设置上去的，而不是在css中直接写死，这是因为这个animation属性在IE10-11浏览器中一旦被设置赋值，就不能再改变，所以我们就不在css中初始设置了。上篇博文我们讲到了一个dom API（animate），虽然很好用，但它在IE11上却不支持，今天就简单讲一下，如何在IE11中使用动画，其实可以理解为换种方式实现，这里我会列出我遇到的一些坑。:我们还是实现一个无限滚动列表为demo。
Javascript图片无缝滚动_妙味课堂
bin1813的博客
12-08 812
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
两种思路实现无缝滚动幻灯片
黎小小的博客
08-01 752
1.无缝滚动幻灯片思路一 无缝滚动幻灯片思路一： 每次图片切换到最后一张再进行点击时，就没有图片了； 所以加一张图片和第一张图片一样，也就是第二组第一张图片（实际就是加完图片后的最后一张）； 每次点击到这张图片时，将图片的索引序号瞬间切换到第一张（设置等于第一张的序号），因为图片一样的所以形成无缝的感觉 重点:切换图片索引序号时，必须同时切换图片的位置 注意这里的navs.length...
css实现滚动轮播
m0_43408715的博客
03-04 1235
通过使用animation实现轮播滚动 style .slide { position: relative; margin: auto; width: 500px; height: 200px; overflow: hidden; color: #FFFFFF; text-align: center; } .slide ul { margin: 10px 0; padding...
css3使用animation动画实现无限滚动轮播图
qq_44472790的博客
11-29 2610
css3动画学习
滚动图片，2种效果，一种有首尾，一种没有
anjichan4261的博客
09-06 88
演示地址:http://www.corange.cn/demo/3785/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht...
无限轮播图特效
weixin_34133829的博客
06-21 70
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; list-style: ...
使用css制作水平横向无缝滚动的轮播图
03-29
``` <li><img src="image1.jpg"> ...最后，为了实现无缝滚动，我们使用CSS动画来使`<ul>`元素水平滚动。 注意，我们还为正在动画中的轮播项添加了一个`.slider-animating`类，这样就可以实现无限循环滚动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值