导航

文章

需要一个简单的轮播图,让它自动轮播切换,不需要增加左右按钮控制。

准备

  1. 需要会简单的CSS和HTML基础可以完成。
  2. vscode编辑器
  3. sm图床
  4. jQuery文件

图床

国产图床有很多家,其中sm图床比较稳定,可以Markdown语法支持。当然无需注册,无外链限制,稳定性很强。

为了方便学习,图床放置在sm里作为外链。

To >

jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。

它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

最新版本是3.6。

To >

轮播代码

创建几个图片代码:

<ul id="slideshow">
        <li><img src="https://i.loli.net/2021/06/24/P5Ft8sRekqWEdh1.jpg"></li>
        <li><img src="https://i.loli.net/2021/06/24/yvwGRS9cDsanh62.jpg"></li>
        <li><img src="https://i.loli.net/2021/06/24/aQOZguhLJ5SYer1.jpg"></li>
        <li><img src="https://i.loli.net/2021/06/24/AFDRtcPKdneNqwk.jpg"></li>
    </ul>
CSS文件:
  #slideshow { 
            overflow: hidden;
            width: 300px; 
            height: 300px; 
            margin: 0px auto; 
            padding: 0;
            position:relative; 
            }
            #slideshow li { 
             position:absolute;
            list-style-type: none;
    }

引用jQuery文件和轮播图代码:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        //css gt 选择器
        $("#slideshow > li:gt(0)").hide();
        //定时器,每3秒切换
        setInterval(function() { 
            //jQuery语法
            $('#slideshow > li:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
        }, 3000);
    </script>   

setInterval函数是定时器,每3秒进行切换。

完整效果:

See the Pen by Naoki Ono (@Naokiono) on CodePen.

TAG: