jQuery实现图片轮播效果

最新推荐文章于 2020-11-29 02:11:03 发布

一只特立独行的pig

最新推荐文章于 2020-11-29 02:11:03 发布

阅读量675

点赞数

分类专栏：学习日志 jQuery 文章标签： jquery html

本文链接：https://blog.csdn.net/sandy975/article/details/73740642

版权

本文介绍了如何使用jQuery实现图片轮播效果。通过详细解析HTML结构和关键CSS样式，如overflow:hidden和float:left，以及讲解jQuery代码实现点击箭头和自动轮播的功能，帮助读者理解图片轮播的实现原理。

摘要由CSDN通过智能技术生成

先上效果图：
这里写图片描述
当点击右边的箭头时，图片就会切换到下一张

先明确一下图片的排布方式，再上HTML代码。

首先是一个外围部分div，也就是所说的wrapper；
然后是放图片轮播的div，也就是所说的banner；
然后是图片组，此处我用的是ul->li；
然后是图片左右两端的箭头；
然后是一个透明背景层div，放在图片底部；
然后是一个图片描述info层，放在图片底部左下角。此处我用的也是ul->li；
然后是一个图片页码索引index层，放在图片底部右下角。此处我也用ul->li；

下面是HTML代码：

<body>   
        <div id="wrapper">         <!--最外层部分-->
            <div id="banner">      <!--轮播部分-->
                <ul class="imgList">
                    <li><img src="images/france01.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france02.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france03.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france04.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france05.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france06.jpg" width="400px" height="200px"></li>
                    <li><img src="images/france07.jpg" w