jQuery实现图片轮播（淡入淡出效果）

最新推荐文章于 2024-03-21 19:52:25 发布

原创

最新推荐文章于 2024-03-21 19:52:25 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#图片轮播 #jquery #淡入淡出

本文介绍了如何使用jQuery实现一个简单的图片轮播功能，通过设置定时器和控制图片的display属性，达到图片淡入淡出的切换效果。首先构建HTML结构，然后添加CSS样式，最后编写jQuery代码进行事件绑定，实现平滑的图片轮播体验。

实现思路：用一个容器把图片都放进去，容器的overflow为hidden，设一个定时器，每间隔一段时间就将其中一张图片的display设为block，其他的都为none。
话不多说，直接上代码
1.首先用html搭好基本框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="wrapper">
            <div id="banner">
                <ul class="imgList">
                    <li><a href="#"><img src="img/01.jpg" /> </a></li>
                    <li><a href="#"><img src="img/02.jpg" /> </a></li>
                    <li><a href="#"><img src="img/03.jpg" /> </a></li>
                    <li><a href="#"><img src="img/04.jpg" /> </a></li>
                    <li><a href="#"><img src="img/05.jpg" /> </a></li>
                </ul>
                <span id="prev"><</span>
                <span id="next">></span>
                <ul class="infoList">
                    <li class="infoOn">1/5</li>
                    <li>2/5</li>
                    <li>3/5</li>
                    <li>4/5</li>
                    <li>5/5</li>
                </ul>
            </div>
            <ul class="indexList">
                <li class="active"><span class="indexOn">迪桑娜VIP大牌日</span></li>
                <li><span>年终回馈日 会员特价权</span></li>
                <li><span>盛夏潮鞋释出 最高满298减50</span></li>
                <li><span>盛夏潮鞋释出 最高满298减50</span></li>
                <li><span>手表配饰百货城 满298减60</span></li>
            </ul>
        </div>
    </body>
</html>

2.来点样式

<style>
            body,div,a,ul,li,img{
                margin:0;
                padding:0;
            }
            ul,li{
                list-style: none;
            }
            a{
                text-decoration: none;
            }
            #wrapper{
                position: relative;
                width:1024px;
                height:580px;
                margin:0 auto;
            }
            #banner{
                position:relative;
                width:1024px;
                height:460px;
                overflow: hidden;
            }
            .imgList{
                position:relative;
                width:1024px;
                height:460px;
                overflow: hidden;
                z-index: 10;
            }
            .imgList li{
                display:inline;
                float: left;
                -webkit-animation-name:fade;
                -webkit-animation-duration: 2s;
                animation-name:fade;
                animation-duration: 2s;
            }
            /*给图片添加淡入淡出效果*/
            @-webkit-keyframes fade{
                from{
                    opacity: 0.;
                }
                to{
                    opacity: 1;
                }
            }
            @keyframes fade{
                from{
                    opacity: 0.5;
                }
                to<

最低0.47元/天解锁文章