小米商城首页轮播图实现（jQuery实现）

最新推荐文章于 2022-08-15 08:22:39 发布

原创

最新推荐文章于 2022-08-15 08:22:39 发布 · 3.9k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jQuery #小米商城轮播图 #轮播图

该博客介绍了如何使用jQuery实现小米商城首页轮播图效果，包括渐入渐出、左右按钮、下方小按钮和鼠标悬停停止轮播等功能。博主根据视频教程制作并完善了代码，使其与官网效果一致。

昨天跟着一个视频做了个小米商城首页轮播图的效果，但是视频里功能不太全面，我又改了一下，现在应该说是和官网没有一点区别了。

先看效果

在这里插入图片描述

是不是感觉差不多，但是由于平台对图片要求，没办法，只能压缩了，功能是全的，渐入渐出、左右按钮、下方小按钮、鼠标移上去停止轮播，这些是都有的。

然后看一下代码

HTML部分

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>小米商城轮播图</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="banner">
    <div class="img-wrap">
        <ul>
            <li class="item" style="display: block;"><img src="img/1.jpg"/></li>
            <li class="item"><img src="img/2.jpg"/></li>
            <li class="item"><img src="img/3.jpg"/></li>
            <li class="item"><img src="img/4.jpg"/></li>
            <li class="item"><img src