jquery实现图片轮番效果（一）

最新推荐文章于 2023-09-14 18:36:20 发布

随想先感

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量4k

点赞数 2

分类专栏： js 文章标签： jquery 图片轮番

本文链接：https://blog.youkuaiyun.com/u013408979/article/details/52782139

版权

本文介绍了如何利用JavaScript库jQuery来创建一个图片轮番展示的功能。通过展示代码片段，包括HTML布局、CSS样式和JavaScript事件处理，详细解析了图片轮播的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因项目功能需要，就研究了js实现多张图片轮番展示的功能。废话不多说，直接上代码

效果图：
这里写图片描述

1、显示页面效果的代码，在里定义轮番的图片

<div id="wrapper">
            <!-- 最外层部分 -->
            <div id="banner">
                <!-- 轮播部分 -->
                <ul class="imgList">
                    <!-- 图片部分 -->
                    <li>
                        <a href="#"><img src="img/shiti.png" width="400px" height="200px" alt="puss in boots1"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162348.png" width="400px" height="200px" alt="puss in boots2"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162444.png" width="400px" height="200px" alt="puss in boots3"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.png" width="400px" height="200px" alt="puss in boots4"></a>
                    </li>       
                </ul>
        <img src="img/left.png" width="20px" height="40px" id="prev"> 
                <img src="img/right.png" width="20px" height="40px" id="next">
                <div class="bg"></div>
                <!-- 图片底部背景层部分-->
                <ul class="infoList">
                    <!-- 图片左下角文字信息部分 -->
                    <li class="infoOn">puss in boots1</li>
                    <li>puss in boots2</li>
                    <li>puss in boots3</li

最低0.47元/天解锁文章