jquery图片滑动联播效果-优快云博客

本文介绍了一种使用jQuery实现图片轮播效果的方法。通过按钮点击切换不同图片，并应用动画效果平滑过渡。每张图片还链接到了不同的网站。

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

<head>
        <script src="../Scripts/jquery-1.10.2.js"></script>
        <meta charset="utf-8"/>
        <style type="text/css">
            body{
                margin:0 auto;
            }
            #div1{
                width:800px;
                height:600px;
                border:1px solid red;
            }
            #img1{
                width:800px;
                height:600px;
                position:absolute;
                left:1px;
            }
            #img2,#img3{
                width:800px;
                height:600px;
                position:absolute;
                left:-800px;
            }
            #div2{
                bottom:0px;
                position:relative;
                top:580px;
                left:700px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    var i = $(this).text();
                    if (i == 1) {
                        $("#img1").animate({ 'left': '1px' });
                        $("#img2").css({ 'left': '-800px' });
                        $("#img3").css({ 'left': '-800px' });
                    } else if (i == 2) {
                        $("#img2").animate({ 'left': '1px' });
                        $("#img1").css({ 'left': '-800px' });
                        $("#img3").css({ 'left': '-800px' });
                    } else if (i == 3) {
                        $("#img3").animate({ 'left': '1px' });
                        $("#img2").css({ 'left': '-800px' });
                        $("#img1").css({ 'left': '-800px' });
                    }
                    else {
                        return;
                    }
                })
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <a href="http://www.baidu.com/"><img id="img1" src="../images/1.jpg" /></a>
            <a href="http://www.sina.com.cn/"><img id="img2" src="../images/2.jpg" /></a>
            <a href="http://www.qq.com/"><img id="img3" src="../images/4.jpg" /></a>
            <div id="div2"><button>1</button><button>2</button><button>3</button></div>
        </div>
    </body>