基于jQuery实现水平轮播效果

最新推荐文章于 2022-11-21 20:33:59 发布

原创

最新推荐文章于 2022-11-21 20:33:59 发布 · 459 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍了如何利用jQuery创建水平轮播图，通过动画效果使第一幅图片宽度逐渐减小至0，然后将其移至父元素末尾，实现无缝轮播。

效果图

在这里插入图片描述

方法：使用动画效果，让第一幅图的宽度逐渐变为0px，然后将第一幅图添加至父元素末尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="./jquery-3.4.1.min.js"></script>
    <style type="text/css">
        #box{
    
    
            width: 800px; height: 300px; 
            margin: 200px auto; 
            position: relative; 
            overflow: hidden;
        }
        #box ul{
    
    
            width: 3200px; height: 300px;
            position: absolute