CSS3实现骗人版无缝轮播图

亦凉 2021-05-12 11:55 537阅读 0赞

## 无缝轮播 ##

### **贴上HTML+CSS代码, 复制就能用, 不懂查W3SCHOOL就完事, 现学现用** ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } #wrap { width: 1000px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden; } #list { position: absolute; left: 0; top: 0; margin: 0; padding: 0; //可以调整播放的速度 -webkit-animation: 3s move infinite linear; width: 200%; } #list li { list-style: none; width: 196px; height: 98px; border: 1px solid #fff; background: #000; color: #fff; font: 50px/98px Arial; text-align: center; float: left; } @-webkit-keyframes move { 0% { left: 0; } 100% { left: -985px; } } @keyframes move { 0% { left: 0; } 100% { left: -985px; } } #wrap:hover #list { -webkit-animation-play-state: paused; /*动画暂停播放*/ } </style>
    </head>
    
    <body>
    
        <div id="wrap">
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        
    </body>
    
    </html>

图片演示, 就是下面1-5的无缝轮播, 懒得放GIF动画啦, 大家可以自己试一下, 其实用到的原理就是图片的切换位置刚好与开始播放的位置相同…所以才称为**骗人版的无缝轮播图**  
![轮播图][20190619123211631.png]

[20190619123211631.png]: /images/20210511/c4940ebf2a784fdcabe266c175271ee6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，537人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现无缝轮播图

需要引用上文封装的动画库代码如下： CSS样式 { margin: 0; padding: 0;

一时失言乱红尘/ 2023年06月25日 10:08/ 0 赞/ 27 阅读

相关 JS实现轮播图-无缝衔接

在这里封装了一个改变元素节点的运动的函数，使用的时候只要调用即可： 1、第一个参数是要操作元素节点。 2、第二个参数是一个对象存放样式名和对应样式的目标值。 3、第三个参

叁歲伎倆/ 2022年10月23日 15:26/ 0 赞/ 263 阅读

相关左右无缝轮播html,JS实现左右无缝轮播图代码

废话不多说了，直接给大家贴代码了。无缝轮播图：无缝轮播图 \\{margin: 0;padding:0; \} ul\{list-style: none;\} .

痛定思痛。/ 2022年10月10日 02:09/ 0 赞/ 391 阅读

相关 JQuery无缝轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

淩亂°似流年/ 2022年05月31日 09:51/ 0 赞/ 343 阅读

相关 jQuery实现的无缝轮播图

其实只要原生js学好了，能够实现轮播图无缝切换，再用jQuery写，感觉简单多了，嗯、为了熟悉jQuery的用法，还是动手把它实现了，废话不多说，看代码吧，实现的过程都注释在代

淩亂°似流年/ 2022年05月26日 00:53/ 0 赞/ 285 阅读

相关纯css3实现无缝轮播图效果

主要就是利用css3中的动画了，看完整实现代码如下： <!DOCTYPE html> <html lang="en"> <head>

迷南。/ 2022年05月14日 10:06/ 0 赞/ 274 阅读

相关 CSS3实现简单的无缝轮播效果

CSS实现简单的无缝轮播效果由于还没有接触到JS实现动态效果，但是比较想实现页面的简单轮播效果，翻了翻CSS标签，发现只有CSS3也可以实现动画效果，

柔情只为你懂/ 2022年03月15日 15:46/ 0 赞/ 677 阅读

相关无缝轮播图切换

这里我们就不多废话了，大家应该都能看懂，直接上代码了，如果大神看到代码有问题，可以帮忙指点一下，谢谢 html <div class="banner">

深藏阁楼爱情的钟/ 2022年02月21日 07:47/ 0 赞/ 539 阅读

相关 CSS3实现骗人版无缝轮播图

无缝轮播贴上HTML+CSS代码, 复制就能用, 不懂查W3SCHOOL就完事, 现学现用 <!DOCTYPE html> <html lang=

亦凉/ 2021年05月12日 11:55/ 0 赞/ 538 阅读

相关无缝轮播图

html: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

系统管理员/ 2021年03月25日 14:39/ 0 赞/ 689 阅读