使用jQuery来实现淘宝首页轮播图的效果

最新推荐文章于 2026-05-29 15:10:28 发布

原创

最新推荐文章于 2026-05-29 15:10:28 发布 · 1.9k 阅读

标签

#javascript #css #jquery

本文介绍如何利用jQuery实现淘宝首页轮播图效果，包括自动轮播、鼠标悬停暂停、导航按钮切换、指示点切换等功能。通过设置元素、CSS样式和轮播效果函数，结合jQuery库，完成轮播图的制作。虽然实现了基本效果，但仍有提升空间，期待改进意见。

一.实现这一效果最主要的几个要求点

轮播图的五张图片要求每隔3秒自动轮播一次
当鼠标移入时，轮播效果会停止，当鼠标移出时又会继续轮换播放
图片的两侧会有两个方向按钮，当点击按钮时图片会随之对应的方向切换
轮播图的下方会有五个白点，代表五张图片；当图片切换时对应的白点会随之亮起，当点击白点时也会切换到对应的图片

实现了这五个要求也就能实现淘宝首页轮播图的效果了。

好了下面直接上代码，里边会有一些注释：

1.首先是设置图片、箭头、小白点等元素

<div class="wrapper">
        <div class="box">
            <span class="left">&lt;</span>  <!--左右箭头-->
            <span class="right">&gt;</span>
            <ul class="img-list">
                <li><img src="./imags/01.jpg" alt=""></li>
                <li><img src="./imags/02.jpg" alt=""></li>
                <li> <img src="./imags/03.jpg" alt=""></li>
                <li><img src="./imags/04.jpg" alt=""></li>
                <li><img src="./imags/05.jpg" alt=""></li> 
                <li><img src="./imags/01.jpg" alt=""></li>                                                                             
            </ul>
            <div class="dot">
                <ul class="dot-list">
                    <li class="item active" ></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                </ul>    
            </div>
        </div>       
    </div>

最低0.47元/天解锁文章