jQuery实现图片轮播效果

最新推荐文章于 2021-09-11 16:13:16 发布

原创

最新推荐文章于 2021-09-11 16:13:16 发布 · 747 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html

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

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

先明确一下图片的排布方式，再上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" width="400px" height="200px"></li>

最低0.47元/天解锁文章